@elementor/editor-variables 3.35.3 → 3.35.5

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

@@ -1,10 +1,6 @@
 import * as React from 'react';
-import { createElement, useEffect, useRef } from 'react';
-import { EllipsisWithTooltip } from '@elementor/editor-ui';
-import { GripVerticalIcon } from '@elementor/icons';
+import { useEffect, useRef } from 'react';
 import {
-	IconButton,
-	Stack,
 	type SxProps,
 	Table,
 	TableBody,
@@ -19,13 +15,12 @@ import { __ } from '@wordpress/i18n';
 
 import { type TVariablesList } from '../../storage';
 import { getVariableType } from '../../variables-registry/variable-type-registry';
-import { LabelField } from '../fields/label-field';
-import { VariableEditMenu, type VariableManagerMenuAction } from './ui/variable-edit-menu';
+import { type VariableManagerMenuAction } from './ui/variable-edit-menu';
 import { VariableTableCell } from './ui/variable-table-cell';
-import { VariableEditableCell } from './variable-editable-cell';
+import { type Row, VariableRow } from './ui/variable-table-row';
 
 type Props = {
-	menuActions: VariableManagerMenuAction[];
+	menuActions: ( variableId: string ) => VariableManagerMenuAction[];
 	variables: TVariablesList;
 	onChange: ( variables: TVariablesList ) => void;
 	autoEditVariableId?: string;
@@ -33,13 +28,6 @@ type Props = {
 	onFieldError?: ( hasError: boolean ) => void;
 };
 
-type Row = ReturnType< typeof getVariableType > & {
-	id: string;
-	type: string;
-	name: string;
-	value: string;
-};
-
 export const VariablesManagerTable = ( {
 	menuActions,
 	variables,
@@ -142,179 +130,19 @@ export const VariablesManagerTable = ( {
 							<UnstableSortableItem
 								key={ row.id }
 								id={ row.id }
-								render={ ( {
-									itemProps,
-									showDropIndication,
-									triggerProps,
-									itemStyle,
-									triggerStyle,
-									isDragged,
-									dropPosition,
-									setTriggerRef,
-									isSorting,
-								}: UnstableSortableItemRenderProps ) => {
-									const showIndicationBefore = showDropIndication && dropPosition === 'before';
-									const showIndicationAfter = showDropIndication && dropPosition === 'after';
-
-									return (
-										<TableRow
-											{ ...itemProps }
-											ref={ itemProps.ref }
-											selected={ isDragged }
-											sx={ {
-												...( showIndicationBefore && {
-													'& td, & th': {
-														borderTop: '2px solid',
-														borderTopColor: 'primary.main',
-													},
-												} ),
-												...( showIndicationAfter && {
-													'& td, & th': {
-														borderBottom: '2px solid',
-														borderBottomColor: 'primary.main',
-													},
-												} ),
-												'& [role="toolbar"], & [draggable]': {
-													opacity: 0,
-												},
-												'&:hover, &:focus-within': {
-													backgroundColor: 'action.hover',
-													'& [role="toolbar"], & [draggable]': {
-														opacity: 1,
-													},
-												},
-											} }
-											style={ { ...itemStyle, ...triggerStyle } }
-										>
-											<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 ) {
-															handleOnChange( {
-																...variables,
-																[ row.id ]: { ...variables[ row.id ], label: value },
-															} );
-														}
-													} }
-													prefixElement={ createElement( row.icon, { fontSize: '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 }
-													onRowRef={ handleRowRef( row.id ) }
-													onAutoEditComplete={
-														autoEditVariableId === row.id ? onAutoEditComplete : undefined
-													}
-													fieldType="label"
-												>
-													<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 ) {
-															handleOnChange( {
-																...variables,
-																[ row.id ]: { ...variables[ row.id ], value },
-															} );
-														}
-													} }
-													editableElement={ ( {
-														value,
-														onChange,
-														onValidationChange,
-														error,
-													} ) =>
-														row.valueField?.( {
-															value,
-															onChange,
-															onPropTypeKeyChange: ( type ) => {
-																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"
-												>
-													{ 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">
-													<VariableEditMenu
-														menuActions={ menuActions }
-														disabled={ isSorting }
-														itemId={ row.id }
-													/>
-												</Stack>
-											</VariableTableCell>
-										</TableRow>
-									);
-								} }
+								render={ ( props: UnstableSortableItemRenderProps ) => (
+									<VariableRow
+										{ ...props }
+										row={ row }
+										variables={ variables }
+										handleOnChange={ handleOnChange }
+										autoEditVariableId={ autoEditVariableId }
+										onAutoEditComplete={ onAutoEditComplete }
+										onFieldError={ onFieldError }
+										menuActions={ menuActions }
+										handleRowRef={ handleRowRef }
+									/>
+								) }
 							/>
 						) ) }
 					</UnstableSortableProvider>
@@ -323,6 +151,7 @@ export const VariablesManagerTable = ( {
 		</TableContainer>
 	);
 };
+
 function sortVariablesOrder( variables: TVariablesList ): ( a: string, b: string ) => number {
 	return ( a, b ) => {
 		const orderA = variables[ a ]?.order ?? Number.MAX_SAFE_INTEGER;

package/src/components/variables-selection.tsx

@@ -1,7 +1,8 @@
-import * as React from 'react';
 import { useState } from 'react';
+import * as React from 'react';
 import { PopoverBody } from '@elementor/editor-editing-panel';
 import { PopoverHeader, PopoverMenuList, SearchField, type VirtualizedItem } from '@elementor/editor-ui';
+import { PromotionAlert } from '@elementor/editor-ui';
 import { ColorFilterIcon, PlusIcon, SettingsIcon } from '@elementor/icons';
 import { Divider, IconButton, Tooltip } from '@elementor/ui';
 import { __, sprintf } from '@wordpress/i18n';
@@ -20,6 +21,9 @@ const SIZE = 'tiny';
 const CREATE_LABEL = __( 'Create variable', 'elementor' );
 const MANAGER_LABEL = __( 'Variables Manager', 'elementor' );
 
+const getProUpgradeUrl = ( variableType: string ) =>
+	`https://go.elementor.com/renew-license-panel-${ variableType }-variable`;
+
 type Props = {
 	closePopover: () => void;
 	onAdd?: () => void;
@@ -143,17 +147,29 @@ export const VariablesSelection = ( { closePopover, onAdd, onEdit, onSettings, d
 			<Divider />
 
 			{ hasVariables && hasSearchResults && (
-				<PopoverMenuList
-					items={ items }
-					onSelect={ handleSetVariable }
-					onClose={ () => {} }
-					selectedValue={ variable }
-					data-testid={ `${ variableType }-variables-list` }
-					menuListTemplate={ VariablesStyledMenuList }
-					menuItemContentTemplate={ ( item: VirtualizedItem< 'item', string > ) => (
-						<MenuItemContent item={ item } />
+				<>
+					<PopoverMenuList
+						items={ items }
+						onSelect={ disabled ? () => {} : handleSetVariable }
+						onClose={ () => {} }
+						selectedValue={ variable }
+						data-testid={ `${ variableType }-variables-list` }
+						menuListTemplate={ ( props ) => <VariablesStyledMenuList { ...props } disabled={ disabled } /> }
+						menuItemContentTemplate={ ( item: VirtualizedItem< 'item', string > ) => (
+							<MenuItemContent item={ item } disabled={ disabled } />
+						) }
+					/>
+					{ disabled && (
+						<PromotionAlert
+							message={ sprintf(
+								/* translators: %s: Variable Type. */
+								__( 'Upgrade to continue creating and editing %s variables.', 'elementor' ),
+								variableType
+							) }
+							upgradeUrl={ getProUpgradeUrl( variableType ) }
+						/>
 					) }
-				/>
+				</>
 			) }
 
 			{ ! hasSearchResults && hasVariables && (
@@ -164,7 +180,7 @@ export const VariablesSelection = ( { closePopover, onAdd, onEdit, onSettings, d
 				/>
 			) }
 
-			{ disabled && (
+			{ disabled && ! hasVariables && (
 				<EmptyState
 					title={ sprintf(
 						/* translators: %s: Variable Type. */

package/src/hooks/use-quota-permissions.ts

@@ -1,18 +1,17 @@
-import { getLicenseInfo } from '../sync/license-info';
+export const useQuotaPermissions = ( variableType: string ) => {
+	const quotaConfig = {
+		...( window.ElementorVariablesQuotaConfig ?? {} ),
+		...( window.ElementorVariablesQuotaConfigExtended ?? {} ),
+	};
 
-declare global {
-	interface Window {
-		ElementorVariablesQuotaConfig: Record< string, number >;
-	}
-}
+	// BC: Remove when 4.01 is released
+	const hasLegacySupport = quotaConfig[ variableType ] === undefined && window.elementorPro;
 
-export const useQuotaPermissions = ( variableType: string ) => {
-	const quotaConfig = window.ElementorVariablesQuotaConfig || {};
 	const limit = quotaConfig[ variableType ] || 0;
-	const hasQuota = limit > 0;
+	const hasPermission = hasLegacySupport || limit > 0;
 
 	return {
-		canAdd: () => hasQuota || getLicenseInfo().hasPro,
-		canEdit: () => hasQuota || getLicenseInfo().hasPro,
+		canAdd: () => hasPermission,
+		canEdit: () => hasPermission,
 	};
 };