@elementor/editor-variables 4.0.0-552 → 4.0.0-573

package/package.json

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

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

@@ -8,7 +8,7 @@ import {
 	PanelHeader,
 	PanelHeaderTitle,
 } from '@elementor/editor-panels';
-import { SaveChangesDialog, SearchField, ThemeProvider, useDialog } from '@elementor/editor-ui';
+import { ConfirmationDialog, SaveChangesDialog, SearchField, ThemeProvider, useDialog } from '@elementor/editor-ui';
 import { changeEditMode } from '@elementor/editor-v1-adapters';
 import { AlertTriangleFilledIcon, ColorFilterIcon, TrashIcon } from '@elementor/icons';
 import {
@@ -30,7 +30,6 @@ import { getMenuActionsForVariable, getVariableType } from '../../variables-regi
 import { DeleteConfirmationDialog } from '../ui/delete-confirmation-dialog';
 import { EmptyState } from '../ui/empty-state';
 import { NoSearchResults } from '../ui/no-search-results';
-import { StopSyncConfirmationDialog } from '../ui/stop-sync-confirmation-dialog';
 import { useAutoEdit } from './hooks/use-auto-edit';
 import { useErrorNavigation } from './hooks/use-error-navigation';
 import { useVariablesManagerState } from './hooks/use-variables-manager-state';
@@ -39,6 +38,12 @@ import { VariablesManagerTable } from './variables-manager-table';
 
 const id = 'variables-manager';
 
+type StopSyncConfirmationDialogProps = {
+	open: boolean;
+	onClose: () => void;
+	onConfirm: () => void;
+};
+
 export const { panel, usePanelActions } = createPanel( {
 	id,
 	component: VariablesManagerPanel,
@@ -348,7 +353,7 @@ export function VariablesManagerPanel() {
 			{ stopSyncConfirmation && (
 				<StopSyncConfirmationDialog
 					open
-					closeDialog={ () => setStopSyncConfirmation( null ) }
+					onClose={ () => setStopSyncConfirmation( null ) }
 					onConfirm={ () => handleStopSyncWithConfirmation( stopSyncConfirmation ) }
 				/>
 			) }
@@ -405,3 +410,26 @@ const usePreventUnload = ( isDirty: boolean ) => {
 		};
 	}, [ isDirty ] );
 };
+
+const StopSyncConfirmationDialog = ( { open, onClose, onConfirm }: StopSyncConfirmationDialogProps ) => (
+	<ConfirmationDialog open={ open } onClose={ onClose }>
+		<ConfirmationDialog.Title icon={ ColorFilterIcon } iconColor="secondary">
+			{ __( 'Stop syncing variable color', 'elementor' ) }
+		</ConfirmationDialog.Title>
+		<ConfirmationDialog.Content>
+			<ConfirmationDialog.ContentText>
+				{ __(
+					'This will disconnect the variable color from version 3. Existing uses on your site will automatically switch to a default color.',
+					'elementor'
+				) }
+			</ConfirmationDialog.ContentText>
+		</ConfirmationDialog.Content>
+		<ConfirmationDialog.Actions
+			onClose={ onClose }
+			onConfirm={ onConfirm }
+			cancelLabel={ __( 'Cancel', 'elementor' ) }
+			confirmLabel={ __( 'Got it', 'elementor' ) }
+			color="secondary"
+		/>
+	</ConfirmationDialog>
+);