@elementor/editor-variables 3.33.0-161 → 3.33.0-163

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "3.33.0-161",
+  "version": "3.33.0-163",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,20 +39,20 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-161",
-    "@elementor/editor-canvas": "3.33.0-161",
-    "@elementor/editor-controls": "3.33.0-161",
-    "@elementor/editor-current-user": "3.33.0-161",
-    "@elementor/editor-editing-panel": "3.33.0-161",
-    "@elementor/editor-mcp": "3.33.0-161",
-    "@elementor/editor-panels": "3.33.0-161",
-    "@elementor/editor-props": "3.33.0-161",
-    "@elementor/editor-ui": "3.33.0-161",
-    "@elementor/editor-v1-adapters": "3.33.0-161",
-    "@elementor/http-client": "3.33.0-161",
+    "@elementor/editor": "3.33.0-163",
+    "@elementor/editor-canvas": "3.33.0-163",
+    "@elementor/editor-controls": "3.33.0-163",
+    "@elementor/editor-current-user": "3.33.0-163",
+    "@elementor/editor-editing-panel": "3.33.0-163",
+    "@elementor/editor-mcp": "3.33.0-163",
+    "@elementor/editor-panels": "3.33.0-163",
+    "@elementor/editor-props": "3.33.0-163",
+    "@elementor/editor-ui": "3.33.0-163",
+    "@elementor/editor-v1-adapters": "3.33.0-163",
+    "@elementor/http-client": "3.33.0-163",
     "@elementor/icons": "1.53.0",
-    "@elementor/mixpanel": "3.33.0-161",
-    "@elementor/schema": "3.33.0-161",
+    "@elementor/mixpanel": "3.33.0-163",
+    "@elementor/schema": "3.33.0-163",
     "@elementor/ui": "1.36.14",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/ui/empty-state.tsx

@@ -18,10 +18,10 @@ export const EmptyState = ( { icon, title, message, onAdd }: Props ) => {
 		<Stack
 			gap={ 1 }
 			alignItems="center"
-			justifyContent="center"
+			justifyContent="flex-start"
 			height="100%"
 			color="text.secondary"
-			sx={ { p: 2.5, pb: 5.5 } }
+			sx={ { p: 2.5, pt: 8, pb: 5.5 } }
 		>
 			{ icon }
 

package/src/components/ui/no-search-results.tsx

@@ -16,7 +16,7 @@ export const NoSearchResults = ( { searchValue, onClear, icon }: Props ) => {
 			justifyContent="center"
 			p={ 2.5 }
 			color="text.secondary"
-			sx={ { pb: 3.5, pt: 5 } }
+			sx={ { pb: 3.5, pt: 8 } }
 		>
 			{ icon }
 			<Typography align="center" variant="subtitle2">

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { createElement } from 'react';
+import { createElement, useRef } from 'react';
 import { PlusIcon } from '@elementor/icons';
-import { bindMenu, bindTrigger, IconButton, Menu, MenuItem, Typography, usePopupState } from '@elementor/ui';
+import { bindMenu, bindTrigger, IconButton, Menu, MenuItem, type PopupState, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { type TVariablesList } from '../../storage';
@@ -13,12 +13,16 @@ type VariableManagerCreateMenuProps = {
 	variables: TVariablesList;
 	onCreate: ( type: string, defaultName: string, defaultValue: string ) => void;
 	disabled?: boolean;
+	menuState: PopupState;
 };
 
-export const VariableManagerCreateMenu = ( { variables, onCreate, disabled }: VariableManagerCreateMenuProps ) => {
-	const menuState = usePopupState( {
-		variant: 'popover',
-	} );
+export const VariableManagerCreateMenu = ( {
+	variables,
+	onCreate,
+	disabled,
+	menuState,
+}: VariableManagerCreateMenuProps ) => {
+	const buttonRef = useRef< HTMLButtonElement >( null );
 
 	const variableTypes = getVariableTypes();
 
@@ -40,6 +44,7 @@ export const VariableManagerCreateMenu = ( { variables, onCreate, disabled }: Va
 		<>
 			<IconButton
 				{ ...bindTrigger( menuState ) }
+				ref={ buttonRef }
 				disabled={ disabled }
 				size={ SIZE }
 				aria-label={ __( 'Add variable', 'elementor' ) }
@@ -56,7 +61,7 @@ export const VariableManagerCreateMenu = ( { variables, onCreate, disabled }: Va
 					elevation: 6,
 				} }
 				{ ...bindMenu( menuState ) }
-				anchorEl={ menuState.anchorEl }
+				anchorEl={ buttonRef.current }
 				anchorOrigin={ {
 					vertical: 'bottom',
 					horizontal: 'right',
@@ -65,8 +70,7 @@ export const VariableManagerCreateMenu = ( { variables, onCreate, disabled }: Va
 					vertical: 'top',
 					horizontal: 'right',
 				} }
-				open={ menuState.isOpen }
-				onClose={ menuState.close }
+				data-testid="variable-manager-create-menu"
 			>
 				{ menuOptions.map( ( option ) => (
 					<MenuItem

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

@@ -11,10 +11,11 @@ import {
 import { SaveChangesDialog, SearchField, ThemeProvider, useDialog } from '@elementor/editor-ui';
 import { changeEditMode } from '@elementor/editor-v1-adapters';
 import { ColorFilterIcon, TrashIcon } from '@elementor/icons';
-import { Alert, Box, Button, CloseButton, Divider, ErrorBoundary, Stack } from '@elementor/ui';
+import { Alert, Box, Button, CloseButton, Divider, ErrorBoundary, Stack, usePopupState } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { DeleteConfirmationDialog } from '../ui/delete-confirmation-dialog';
+import { EmptyState } from '../ui/empty-state';
 import { NoSearchResults } from '../ui/no-search-results';
 import { useAutoEdit } from './hooks/use-auto-edit';
 import { useVariablesManagerState } from './hooks/use-variables-manager-state';
@@ -39,6 +40,10 @@ export function VariablesManagerPanel() {
 	const { close: closePanel } = usePanelActions();
 	const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
 
+	const createMenuState = usePopupState( {
+		variant: 'popover',
+	} );
+
 	const {
 		variables,
 		isDirty,
@@ -99,7 +104,7 @@ export function VariablesManagerPanel() {
 		},
 	];
 
-	const hasVariables = Object.keys( variables ).length !== 0;
+	const hasVariables = Object.values( variables ).some( ( variable ) => ! variable.deleted );
 
 	return (
 		<ThemeProvider>
@@ -118,6 +123,7 @@ export function VariablesManagerPanel() {
 									<VariableManagerCreateMenu
 										onCreate={ handleCreateVariable }
 										variables={ variables }
+										menuState={ createMenuState }
 									/>
 									<CloseButton
 										aria-label="Close"
@@ -143,6 +149,7 @@ export function VariablesManagerPanel() {
 							onSearch={ handleSearch }
 						/>
 						<Divider sx={ { width: '100%' } } />
+
 						{ hasVariables && (
 							<VariablesManagerTable
 								menuActions={ menuActions }
@@ -154,13 +161,25 @@ export function VariablesManagerPanel() {
 							/>
 						) }
 
-						{ ! hasVariables && (
+						{ ! 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 }
+							/>
+						) }
 					</PanelBody>
 
 					<PanelFooter>

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

@@ -20,8 +20,8 @@ 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 './utils/variable-edit-menu';
-import { VariableTableCell } from './utils/variable-table-cell';
+import { VariableEditMenu, type VariableManagerMenuAction } from './ui/variable-edit-menu';
+import { VariableTableCell } from './ui/variable-table-cell';
 import { VariableEditableCell } from './variable-editable-cell';
 
 type Props = {