@elementor/editor-variables 4.0.0-538 → 4.0.0-540

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "4.0.0-538",
+  "version": "4.0.0-540",
   "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-538",
-    "@elementor/editor-canvas": "4.0.0-538",
-    "@elementor/editor-controls": "4.0.0-538",
-    "@elementor/editor-current-user": "4.0.0-538",
-    "@elementor/editor-mcp": "4.0.0-538",
-    "@elementor/editor-panels": "4.0.0-538",
-    "@elementor/editor-props": "4.0.0-538",
-    "@elementor/editor-ui": "4.0.0-538",
-    "@elementor/editor-v1-adapters": "4.0.0-538",
-    "@elementor/menus": "4.0.0-538",
-    "@elementor/http-client": "4.0.0-538",
+    "@elementor/editor": "4.0.0-540",
+    "@elementor/editor-canvas": "4.0.0-540",
+    "@elementor/editor-controls": "4.0.0-540",
+    "@elementor/editor-current-user": "4.0.0-540",
+    "@elementor/editor-mcp": "4.0.0-540",
+    "@elementor/editor-panels": "4.0.0-540",
+    "@elementor/editor-props": "4.0.0-540",
+    "@elementor/editor-ui": "4.0.0-540",
+    "@elementor/editor-v1-adapters": "4.0.0-540",
+    "@elementor/menus": "4.0.0-540",
+    "@elementor/http-client": "4.0.0-540",
     "@elementor/icons": "^1.63.0",
-    "@elementor/mixpanel": "4.0.0-538",
-    "@elementor/schema": "4.0.0-538",
+    "@elementor/mixpanel": "4.0.0-540",
+    "@elementor/schema": "4.0.0-540",
     "@elementor/ui": "1.37.2",
-    "@elementor/utils": "4.0.0-538",
+    "@elementor/utils": "4.0.0-540",
     "@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/variables-selection.tsx

@@ -1,7 +1,13 @@
-import * as React from 'react';
 import { useState } from 'react';
-import { SectionPopoverBody } from '@elementor/editor-ui';
-import { PopoverHeader, PopoverMenuList, SearchField, type VirtualizedItem } from '@elementor/editor-ui';
+import * as React from 'react';
+import {
+	PopoverHeader,
+	PopoverMenuList,
+	SearchField,
+	SectionPopoverBody,
+	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 +26,9 @@ const SIZE = 'tiny';
 const CREATE_LABEL = __( 'Create variable', 'elementor' );
 const MANAGER_LABEL = __( 'Variables Manager', 'elementor' );
 
+const getProUpgradeUrl = ( variableType: string ) =>
+	`https://go.elementor.com/go-pro-panel-${ variableType }-variable/`;
+
 type Props = {
 	closePopover: () => void;
 	onAdd?: () => void;
@@ -143,17 +152,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 +185,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,
 	};
 };

package/src/sync/license-info.ts

@@ -1,5 +0,0 @@
-export function getLicenseInfo() {
-	return {
-		hasPro: !! window.elementorPro,
-	};
-}