@elementor/editor-variables 3.35.3 → 3.35.5

package/package.json

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

package/src/components/ui/menu-item-content.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MouseEvent } from 'react';
 import { EllipsisWithTooltip, type VirtualizedItem } from '@elementor/editor-ui';
 import { EditIcon } from '@elementor/icons';
 import { Box, IconButton, ListItemIcon, Tooltip, Typography } from '@elementor/ui';
@@ -7,12 +8,17 @@ import { __ } from '@wordpress/i18n';
 const SIZE = 'tiny';
 const EDIT_LABEL = __( 'Edit variable', 'elementor' );
 
-export const MenuItemContent = < T, V extends string >( { item }: { item: VirtualizedItem< T, V > } ) => {
+type MenuItemContentProps< T, V extends string > = {
+	item: VirtualizedItem< T, V >;
+	disabled?: boolean;
+};
+
+export const MenuItemContent = < T, V extends string >( { item, disabled = false }: MenuItemContentProps< T, V > ) => {
 	const onEdit = item.onEdit as ( ( value: V ) => void ) | undefined;
 
 	return (
 		<>
-			<ListItemIcon>{ item.icon }</ListItemIcon>
+			<ListItemIcon sx={ { color: disabled ? 'text.disabled' : 'inherit' } }>{ item.icon }</ListItemIcon>
 			<Box
 				sx={ {
 					flex: 1,
@@ -26,7 +32,7 @@ export const MenuItemContent = < T, V extends string >( { item }: { item: Virtua
 					title={ item.label || item.value }
 					as={ Typography }
 					variant="caption"
-					color="text.primary"
+					color={ disabled ? 'text.disabled' : 'text.primary' }
 					sx={ { marginTop: '1px', lineHeight: '2' } }
 					maxWidth="50%"
 				/>
@@ -35,17 +41,17 @@ export const MenuItemContent = < T, V extends string >( { item }: { item: Virtua
 						title={ item.secondaryText }
 						as={ Typography }
 						variant="caption"
-						color="text.tertiary"
+						color={ disabled ? 'text.disabled' : 'text.tertiary' }
 						sx={ { marginTop: '1px', lineHeight: '1' } }
 						maxWidth="50%"
 					/>
 				) }
 			</Box>
-			{ !! onEdit && (
+			{ !! onEdit && ! disabled && (
 				<Tooltip placement="top" title={ EDIT_LABEL }>
 					<IconButton
 						sx={ { mx: 1, opacity: '0' } }
-						onClick={ ( e: React.MouseEvent< HTMLButtonElement > ) => {
+						onClick={ ( e: MouseEvent< HTMLButtonElement > ) => {
 							e.stopPropagation();
 							onEdit( item.value );
 						} }

package/src/components/ui/styled-menu-list.tsx

@@ -1,6 +1,6 @@
 import { MenuList, styled } from '@elementor/ui';
 
-export const VariablesStyledMenuList = styled( MenuList )( ( { theme } ) => ( {
+export const VariablesStyledMenuList = styled( MenuList )< { disabled?: boolean } >( ( { theme, disabled } ) => ( {
 	'& > li': {
 		height: 32,
 		width: '100%',
@@ -11,13 +11,15 @@ export const VariablesStyledMenuList = styled( MenuList )( ( { theme } ) => ( {
 		...theme.typography.caption,
 		lineHeight: 'inherit',
 		padding: theme.spacing( 0.5, 1, 0.5, 2 ),
-		'&:hover, &:focus': {
-			backgroundColor: theme.palette.action.hover,
-		},
+		...( ! disabled && {
+			'&:hover, &:focus': {
+				backgroundColor: theme.palette.action.hover,
+			},
+			cursor: 'pointer',
+		} ),
 		'&[aria-selected="true"]': {
 			backgroundColor: theme.palette.action.selected,
 		},
-		cursor: 'pointer',
 		textOverflow: 'ellipsis',
 		position: 'absolute',
 		top: 0,

package/src/components/ui/variable-promotion-chip.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { forwardRef, type MouseEvent, useImperativeHandle, useState } from 'react';
+import { PromotionChip, PromotionPopover, useCanvasClickHandler } from '@elementor/editor-ui';
+import { Box } from '@elementor/ui';
+import { capitalize } from '@elementor/utils';
+import { __, sprintf } from '@wordpress/i18n';
+
+type VariablePromotionChipProps = {
+	variableType: string;
+	upgradeUrl: string;
+};
+
+export type VariablePromotionChipRef = {
+	toggle: () => void;
+};
+
+export const VariablePromotionChip = forwardRef< VariablePromotionChipRef, VariablePromotionChipProps >(
+	( { variableType, upgradeUrl }, ref ) => {
+		const [ isOpen, setIsOpen ] = useState( false );
+
+		useCanvasClickHandler( isOpen, () => setIsOpen( false ) );
+
+		const toggle = () => setIsOpen( ( prev ) => ! prev );
+
+		useImperativeHandle( ref, () => ( { toggle } ), [] );
+
+		const title = sprintf(
+			/* translators: %s: Variable Type. */
+			__( '%s variables', 'elementor' ),
+			capitalize( variableType )
+		);
+
+		const content = sprintf(
+			/* translators: %s: Variable Type. */
+			__( 'Upgrade to continue creating and editing %s variables.', 'elementor' ),
+			variableType
+		);
+
+		return (
+			<PromotionPopover
+				open={ isOpen }
+				title={ title }
+				content={ content }
+				ctaText={ __( 'Upgrade now', 'elementor' ) }
+				ctaUrl={ upgradeUrl }
+				onClose={ ( e: MouseEvent ) => {
+					e.stopPropagation();
+					setIsOpen( false );
+				} }
+			>
+				<Box
+					onClick={ ( e: MouseEvent ) => {
+						e.stopPropagation();
+						toggle();
+					} }
+					sx={ { cursor: 'pointer', display: 'inline-flex' } }
+				>
+					<PromotionChip />
+				</Box>
+			</PromotionPopover>
+		);
+	}
+);

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createElement } from 'react';
+import { createElement, type MouseEvent } from 'react';
 import { DotsVerticalIcon } from '@elementor/icons';
 import { bindMenu, bindTrigger, IconButton, Menu, MenuItem, type SvgIconProps, usePopupState } from '@elementor/ui';
 
@@ -21,9 +21,19 @@ export const VariableEditMenu = ( { menuActions, disabled, itemId }: VariableEdi
 		variant: 'popover',
 	} );
 
+	const triggerProps = bindTrigger( menuState );
+
 	return (
 		<>
-			<IconButton { ...bindTrigger( menuState ) } disabled={ disabled } size="tiny">
+			<IconButton
+				{ ...triggerProps }
+				disabled={ disabled }
+				size="tiny"
+				onClick={ ( e: MouseEvent ) => {
+					e.stopPropagation();
+					triggerProps.onClick?.( e );
+				} }
+			>
 				<DotsVerticalIcon fontSize="tiny" />
 			</IconButton>
 
@@ -51,7 +61,8 @@ export const VariableEditMenu = ( { menuActions, disabled, itemId }: VariableEdi
 				{ menuActions.map( ( action ) => (
 					<MenuItem
 						key={ action.name }
-						onClick={ () => {
+						onClick={ ( e: MouseEvent ) => {
+							e.stopPropagation();
 							action.onClick?.( itemId );
 							menuState.close();
 						} }

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

@@ -0,0 +1,210 @@
+import * as React from 'react';
+import { createElement, useRef } from 'react';
+import { EllipsisWithTooltip } from '@elementor/editor-ui';
+import { GripVerticalIcon } from '@elementor/icons';
+import { IconButton, Stack, TableRow, type UnstableSortableItemRenderProps } from '@elementor/ui';
+
+import { useQuotaPermissions } from '../../../hooks/use-quota-permissions';
+import { type TVariablesList } from '../../../storage';
+import { type getVariableType } from '../../../variables-registry/variable-type-registry';
+import { LabelField } from '../../fields/label-field';
+import { VariablePromotionChip, type VariablePromotionChipRef } from '../../ui/variable-promotion-chip';
+import { VariableEditableCell } from '../variable-editable-cell';
+import { VariableEditMenu, type VariableManagerMenuAction } from './variable-edit-menu';
+import { VariableTableCell } from './variable-table-cell';
+
+export type Row = ReturnType< typeof getVariableType > & {
+	id: string;
+	type: string;
+	name: string;
+	value: string;
+};
+export const VariableRow = (
+	props: UnstableSortableItemRenderProps & {
+		row: Row;
+		variables: TVariablesList;
+		handleOnChange: ( variables: TVariablesList ) => void;
+		autoEditVariableId?: string;
+		onAutoEditComplete?: () => void;
+		onFieldError?: ( hasError: boolean ) => void;
+		menuActions: ( variableId: string ) => VariableManagerMenuAction[];
+		handleRowRef: ( id: string ) => ( ref: HTMLTableRowElement | null ) => void;
+	}
+) => {
+	const {
+		row,
+		variables,
+		handleOnChange,
+		autoEditVariableId,
+		onAutoEditComplete,
+		onFieldError,
+		menuActions,
+		handleRowRef,
+		itemProps,
+		showDropIndication,
+		triggerProps,
+		itemStyle,
+		triggerStyle,
+		isDragged,
+		dropPosition,
+		setTriggerRef,
+		isSorting,
+	} = props;
+	const promotionRef = useRef< VariablePromotionChipRef >( null );
+	const isDisabled = ! useQuotaPermissions( row.type ).canEdit();
+
+	const showIndicationBefore = showDropIndication && dropPosition === 'before';
+	const showIndicationAfter = showDropIndication && dropPosition === 'after';
+
+	return (
+		<TableRow
+			{ ...itemProps }
+			ref={ itemProps.ref }
+			selected={ isDragged }
+			sx={ {
+				...( isDisabled && {
+					'& td, & th': {
+						color: 'text.disabled',
+					},
+				} ),
+				...( showIndicationBefore && {
+					'& td, & th': {
+						borderTop: '2px solid',
+						borderTopColor: 'primary.main',
+					},
+				} ),
+				...( showIndicationAfter && {
+					'& td, & th': {
+						borderBottom: '2px solid',
+						borderBottomColor: 'primary.main',
+					},
+				} ),
+				'&:hover, &:focus-within': {
+					backgroundColor: 'action.hover',
+					'& [role="toolbar"], & [draggable]': {
+						opacity: 1,
+					},
+				},
+				'& [role="toolbar"], & [draggable]': {
+					opacity: 0,
+				},
+			} }
+			style={ { ...itemStyle, ...triggerStyle } }
+			onClick={ () => {
+				if ( isDisabled ) {
+					promotionRef.current?.toggle();
+				}
+			} }
+		>
+			<VariableTableCell noPadding width={ 10 } maxWidth={ 10 }>
+				<IconButton size="small" ref={ setTriggerRef } { ...triggerProps } disabled={ isSorting } draggable>
+					<GripVerticalIcon fontSize="inherit" />
+				</IconButton>
+			</VariableTableCell>
+			<VariableTableCell>
+				<VariableEditableCell
+					initialValue={ row.name }
+					onChange={ ( value ) => {
+						if ( value !== row.name && ! isDisabled ) {
+							handleOnChange( {
+								...variables,
+								[ row.id ]: { ...variables[ row.id ], label: value },
+							} );
+						}
+					} }
+					prefixElement={ createElement( row.icon, {
+						fontSize: 'inherit',
+						color: isDisabled ? 'disabled' : 'inherit',
+					} ) }
+					editableElement={ ( { value, onChange, onValidationChange, error } ) => (
+						<LabelField
+							id={ 'variable-label-' + row.id }
+							size="tiny"
+							value={ value }
+							onChange={ onChange }
+							onErrorChange={ ( errorMsg ) => {
+								onValidationChange?.( errorMsg );
+								onFieldError?.( !! errorMsg );
+							} }
+							error={ error }
+							focusOnShow
+							selectOnShow={ autoEditVariableId === row.id }
+							showWarningInfotip={ true }
+							variables={ variables }
+						/>
+					) }
+					autoEdit={ autoEditVariableId === row.id && ! isDisabled }
+					onRowRef={ handleRowRef( row.id ) }
+					onAutoEditComplete={ autoEditVariableId === row.id ? onAutoEditComplete : undefined }
+					fieldType="label"
+					disabled={ isDisabled }
+				>
+					<EllipsisWithTooltip title={ row.name } sx={ { border: '4px solid transparent' } }>
+						{ row.name }
+					</EllipsisWithTooltip>
+				</VariableEditableCell>
+			</VariableTableCell>
+			<VariableTableCell>
+				<VariableEditableCell
+					initialValue={ row.value }
+					onChange={ ( value ) => {
+						if ( value !== row.value && ! isDisabled ) {
+							handleOnChange( {
+								...variables,
+								[ row.id ]: { ...variables[ row.id ], value },
+							} );
+						}
+					} }
+					editableElement={ ( { value, onChange, onValidationChange, error } ) =>
+						row.valueField?.( {
+							value,
+							onChange,
+							onPropTypeKeyChange: ( type ) => {
+								if ( ! isDisabled ) {
+									handleOnChange( {
+										...variables,
+										[ row.id ]: { ...variables[ row.id ], type },
+									} );
+								}
+							},
+							propTypeKey: row.type,
+							onValidationChange: ( errorMsg ) => {
+								onValidationChange?.( errorMsg );
+								onFieldError?.( !! errorMsg );
+							},
+							error,
+						} ) ?? <></>
+					}
+					onRowRef={ handleRowRef( row.id ) }
+					gap={ 0.25 }
+					fieldType="value"
+					disabled={ isDisabled }
+				>
+					{ row.startIcon && row.startIcon( { value: row.value } ) }
+					<EllipsisWithTooltip
+						title={ row.value }
+						sx={ {
+							border: '4px solid transparent',
+							lineHeight: '1',
+							pt: 0.25,
+						} }
+					>
+						{ row.value }
+					</EllipsisWithTooltip>
+				</VariableEditableCell>
+			</VariableTableCell>
+			<VariableTableCell align="right" noPadding width={ 16 } maxWidth={ 16 } sx={ { paddingInlineEnd: 1 } }>
+				<Stack role="toolbar" direction="row" justifyContent="flex-end" alignItems="center">
+					{ isDisabled && (
+						<VariablePromotionChip
+							variableType={ row.variableType }
+							upgradeUrl={ `https://go.elementor.com/renew-license-manager-${ row.variableType }-variable` }
+							ref={ promotionRef }
+						/>
+					) }
+					<VariableEditMenu menuActions={ menuActions( row.id ) } disabled={ isSorting } itemId={ row.id } />
+				</Stack>
+			</VariableTableCell>
+		</TableRow>
+	);
+};

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

@@ -16,6 +16,7 @@ type VariableEditableCellProps = {
 	onAutoEditComplete?: () => void;
 	gap?: number;
 	fieldType?: 'label' | 'value';
+	disabled?: boolean;
 };
 
 export const VariableEditableCell = React.memo(
@@ -30,6 +31,7 @@ export const VariableEditableCell = React.memo(
 		onAutoEditComplete,
 		gap = 1,
 		fieldType,
+		disabled = false,
 	}: VariableEditableCellProps ) => {
 		const [ value, setValue ] = useState( initialValue );
 		const [ isEditing, setIsEditing ] = useState( false );
@@ -54,17 +56,23 @@ export const VariableEditableCell = React.memo(
 		}, [ onRowRef ] );
 
 		useEffect( () => {
-			if ( autoEdit && ! isEditing ) {
+			if ( autoEdit && ! isEditing && ! disabled ) {
 				setIsEditing( true );
 				onAutoEditComplete?.();
 			}
-		}, [ autoEdit, isEditing, onAutoEditComplete ] );
+		}, [ autoEdit, isEditing, onAutoEditComplete, disabled ] );
 
 		const handleDoubleClick = () => {
+			if ( disabled ) {
+				return;
+			}
 			setIsEditing( true );
 		};
 
 		const handleKeyDown = ( event: React.KeyboardEvent< HTMLDivElement > ) => {
+			if ( disabled ) {
+				return;
+			}
 			if ( event.key === 'Enter' ) {
 				handleSave();
 			} else if ( event.key === 'Escape' ) {
@@ -137,9 +145,9 @@ export const VariableEditableCell = React.memo(
 				gap={ gap }
 				onDoubleClick={ handleDoubleClick }
 				onKeyDown={ handleKeyDown }
-				tabIndex={ 0 }
+				tabIndex={ disabled ? -1 : 0 }
 				role="button"
-				aria-label="Double click or press Space to edit"
+				aria-label={ disabled ? '' : 'Double click or press Space to edit' }
 			>
 				{ prefixElement }
 				{ children }

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

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { createElement, useMemo, useRef, useState } from 'react';
-import { PromotionChip, PromotionPopover } from '@elementor/editor-ui';
+import { createElement, useMemo, useRef } from 'react';
 import { PlusIcon } from '@elementor/icons';
 import { bindMenu, bindTrigger, IconButton, Menu, MenuItem, type PopupState, Typography } from '@elementor/ui';
 import { capitalize } from '@elementor/utils';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 import { useQuotaPermissions } from '../../hooks/use-quota-permissions';
 import { type TVariablesList } from '../../storage';
 import { trackVariablesManagerEvent } from '../../utils/tracking';
 import { getVariableTypes } from '../../variables-registry/variable-type-registry';
+import { VariablePromotionChip, type VariablePromotionChipRef } from '../ui/variable-promotion-chip';
 
 export const SIZE = 'tiny';
 
@@ -28,12 +28,7 @@ type VariableManagerCreateMenuProps = {
 	menuState: PopupState;
 };
 
-export const VariableManagerCreateMenu = ( {
-	variables,
-	onCreate,
-	disabled,
-	menuState,
-}: VariableManagerCreateMenuProps ) => {
+export const VariableManagerCreateMenu = ( { variables, onCreate, menuState }: VariableManagerCreateMenuProps ) => {
 	const buttonRef = useRef< HTMLButtonElement >( null );
 
 	const variableTypes = getVariableTypes();
@@ -57,7 +52,6 @@ export const VariableManagerCreateMenu = ( {
 			<IconButton
 				{ ...bindTrigger( menuState ) }
 				ref={ buttonRef }
-				disabled={ disabled }
 				size={ SIZE }
 				aria-label={ __( 'Add variable', 'elementor' ) }
 			>
@@ -109,7 +103,7 @@ const MenuOption = ( {
 	onCreate: VariableManagerCreateMenuProps[ 'onCreate' ];
 	onClose: () => void;
 } ) => {
-	const [ isPopoverOpen, setIsPopoverOpen ] = useState( false );
+	const promotionRef = useRef< VariablePromotionChipRef >( null );
 	const userQuotaPermissions = useQuotaPermissions( config.propTypeKey );
 
 	const displayName = capitalize( config.variableType );
@@ -117,9 +111,7 @@ const MenuOption = ( {
 
 	const handleClick = () => {
 		if ( isDisabled ) {
-			if ( ! isPopoverOpen ) {
-				setIsPopoverOpen( true );
-			}
+			promotionRef.current?.toggle();
 			return;
 		}
 
@@ -130,18 +122,6 @@ const MenuOption = ( {
 		onClose();
 	};
 
-	const title = sprintf(
-		/* translators: %s: Variable Type. */
-		__( '%s variables', 'elementor' ),
-		capitalize( config.variableType )
-	);
-
-	const content = sprintf(
-		/* translators: %s: Variable Type. */
-		__( 'Upgrade to continue creating and editing %s variables.', 'elementor' ),
-		config.variableType
-	);
-
 	return (
 		<MenuItem onClick={ handleClick } sx={ { gap: 1.5, cursor: 'pointer' } }>
 			{ createElement( config.icon, { fontSize: SIZE, color: isDisabled ? 'disabled' : 'action' } ) }
@@ -149,18 +129,11 @@ const MenuOption = ( {
 				{ displayName }
 			</Typography>
 			{ isDisabled && (
-				<PromotionPopover
-					open={ isPopoverOpen }
-					title={ title }
-					content={ content }
-					ctaText={ __( 'Upgrade now', 'elementor' ) }
-					ctaUrl={ `https://go.elementor.com/go-pro-manager-${ config.variableType }-variable/` }
-					onClose={ () => {
-						setIsPopoverOpen( false );
-					} }
-				>
-					<PromotionChip />
-				</PromotionPopover>
+				<VariablePromotionChip
+					variableType={ config.variableType }
+					upgradeUrl={ `https://go.elementor.com/go-pro-manager-${ config.variableType }-variable/` }
+					ref={ promotionRef }
+				/>
 			) }
 		</MenuItem>
 	);

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

@@ -139,22 +139,25 @@ export function VariablesManagerPanel() {
 		[ handleDeleteVariable ]
 	);
 
-	const menuActions = [
-		{
-			name: __( 'Delete', 'elementor' ),
-			icon: TrashIcon,
-			color: 'error.main',
-			onClick: ( itemId: string ) => {
-				const variable = variables[ itemId ];
-				if ( variable ) {
-					setDeleteConfirmation( { id: itemId, label: variable.label } );
+	const buildMenuActions = useCallback(
+		() => [
+			{
+				name: __( 'Delete', 'elementor' ),
+				icon: TrashIcon,
+				color: 'error.main',
+				onClick: ( itemId: string ) => {
+					const variable = variables[ itemId ];
+					if ( variable ) {
+						setDeleteConfirmation( { id: itemId, label: variable.label } );
 
-					const variableTypeOptions = getVariableType( variable.type );
-					trackVariablesManagerEvent( { action: 'delete', varType: variableTypeOptions?.variableType } );
-				}
+						const variableTypeOptions = getVariableType( variable.type );
+						trackVariablesManagerEvent( { action: 'delete', varType: variableTypeOptions?.variableType } );
+					}
+				},
 			},
-		},
-	];
+		],
+		[ variables ]
+	);
 
 	const hasVariables = Object.keys( variables ).length > 0;
 
@@ -212,7 +215,7 @@ export function VariablesManagerPanel() {
 				>
 					{ hasVariables && (
 						<VariablesManagerTable
-							menuActions={ menuActions }
+							menuActions={ buildMenuActions }
 							variables={ variables }
 							onChange={ handleOnChange }
 							autoEditVariableId={ autoEditVariableId }