@elementor/editor-variables 3.32.0-49 → 3.32.0-50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "3.32.0-49",
+  "version": "3.32.0-50",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,18 +39,18 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.32.0-49",
-    "@elementor/editor-canvas": "3.32.0-49",
-    "@elementor/editor-controls": "3.32.0-49",
-    "@elementor/editor-current-user": "3.32.0-49",
-    "@elementor/editor-editing-panel": "3.32.0-49",
-    "@elementor/editor-panels": "3.32.0-49",
-    "@elementor/editor-props": "3.32.0-49",
-    "@elementor/editor-ui": "3.32.0-49",
-    "@elementor/editor-v1-adapters": "3.32.0-49",
-    "@elementor/http-client": "3.32.0-49",
+    "@elementor/editor": "3.32.0-50",
+    "@elementor/editor-canvas": "3.32.0-50",
+    "@elementor/editor-controls": "3.32.0-50",
+    "@elementor/editor-current-user": "3.32.0-50",
+    "@elementor/editor-editing-panel": "3.32.0-50",
+    "@elementor/editor-panels": "3.32.0-50",
+    "@elementor/editor-props": "3.32.0-50",
+    "@elementor/editor-ui": "3.32.0-50",
+    "@elementor/editor-v1-adapters": "3.32.0-50",
+    "@elementor/http-client": "3.32.0-50",
     "@elementor/icons": "1.46.0",
-    "@elementor/schema": "3.32.0-49",
+    "@elementor/schema": "3.32.0-50",
     "@elementor/ui": "1.36.8",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/variable-selection-popover.tsx

@@ -28,7 +28,7 @@ export const VariableSelectionPopover = ( { closePopover, propTypeKey, selectedV
 	const [ currentView, setCurrentView ] = useState< View >( VIEW_LIST );
 	const [ editId, setEditId ] = useState< string >( '' );
 	const { open } = usePanelActions();
-	const onSettingsAvailable = isExperimentActive( 'e_variables_settings' )
+	const onSettingsAvailable = isExperimentActive( 'e_variables_manager' )
 		? () => {
 				open();
 		  }
@@ -98,8 +98,8 @@ function RenderView( props: ViewProps ): React.ReactNode {
 
 	if ( userPermissions.canManageSettings() && props.onSettings ) {
 		handlers.onSettings = () => {
-			props.onSettings?.();
 			props.closePopover();
+			props.onSettings?.();
 		};
 	}
 

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

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { createElement } from 'react';
+import { DotsVerticalIcon } from '@elementor/icons';
+import { bindMenu, bindTrigger, IconButton, Menu, MenuItem, type SvgIconProps, usePopupState } from '@elementor/ui';
+
+export type VariableManagerMenuAction = {
+	name: string;
+	icon: React.ForwardRefExoticComponent< Omit< SvgIconProps, 'ref' > & React.RefAttributes< SVGSVGElement > >;
+	color: string;
+	onClick: () => void;
+};
+
+type VariableEditMenuProps = {
+	menuActions: VariableManagerMenuAction[];
+	disabled?: boolean;
+};
+
+export const VariableEditMenu = ( { menuActions, disabled }: VariableEditMenuProps ) => {
+	const menuState = usePopupState( {
+		variant: 'popover',
+	} );
+
+	return (
+		<>
+			<IconButton { ...bindTrigger( menuState ) } disabled={ disabled } size="tiny">
+				<DotsVerticalIcon fontSize="tiny" />
+			</IconButton>
+
+			<Menu
+				disablePortal
+				MenuListProps={ {
+					dense: true,
+				} }
+				PaperProps={ {
+					elevation: 6,
+				} }
+				{ ...bindMenu( menuState ) }
+				anchorEl={ menuState.anchorEl }
+				anchorOrigin={ {
+					vertical: 'bottom',
+					horizontal: 'right',
+				} }
+				transformOrigin={ {
+					vertical: 'top',
+					horizontal: 'right',
+				} }
+				open={ menuState.isOpen }
+				onClose={ menuState.close }
+			>
+				{ menuActions.map( ( action ) => (
+					<MenuItem
+						key={ action.name }
+						onClick={ () => {
+							action.onClick?.();
+							menuState.close();
+						} }
+						sx={ {
+							color: action.color,
+							gap: 1,
+						} }
+					>
+						{ action.icon &&
+							createElement( action.icon, {
+								fontSize: 'inherit',
+							} ) }{ ' ' }
+						{ action.name }
+					</MenuItem>
+				) ) }
+			</Menu>
+		</>
+	);
+};

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

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { type SxProps, TableCell } from '@elementor/ui';
+
+type VariableTableCellProps = {
+	children?: React.ReactNode;
+	isHeader?: boolean;
+	width?: number;
+	maxWidth?: number;
+	align?: 'left' | 'right' | 'center';
+	noPadding?: boolean;
+	sx?: SxProps;
+};
+
+export const VariableTableCell = ( {
+	children,
+	isHeader,
+	width,
+	maxWidth,
+	align,
+	noPadding,
+	sx,
+}: VariableTableCellProps ) => {
+	const baseSx: SxProps = {
+		maxWidth: maxWidth ?? 150,
+		cursor: 'initial',
+		typography: 'caption',
+		...( isHeader && { color: 'text.primary', fontWeight: 'bold' } ),
+		...( width && { width } ),
+		...sx,
+	};
+
+	return (
+		<TableCell size="small" padding={ noPadding ? 'none' : undefined } align={ align } sx={ baseSx }>
+			{ children }
+		</TableCell>
+	);
+};

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

@@ -10,10 +10,12 @@ import {
 } from '@elementor/editor-panels';
 import { ThemeProvider } from '@elementor/editor-ui';
 import { changeEditMode } from '@elementor/editor-v1-adapters';
-import { FilterIcon, XIcon } from '@elementor/icons';
+import { ColorFilterIcon, TrashIcon, XIcon } from '@elementor/icons';
 import { Alert, Box, Button, Divider, ErrorBoundary, IconButton, type IconButtonProps, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { VariablesManagerTable } from './variables-manager-table';
+
 const id = 'variables-manager';
 
 export const { panel, usePanelActions } = createPanel( {
@@ -34,6 +36,15 @@ export function VariablesManagerPanel() {
 
 	usePreventUnload( isDirty );
 
+	const menuActions = [
+		{
+			name: __( 'Delete', 'elementor' ),
+			icon: TrashIcon,
+			color: 'error.main',
+			onClick: () => {},
+		},
+	];
+
 	return (
 		<ThemeProvider>
 			<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>
@@ -42,8 +53,8 @@ export function VariablesManagerPanel() {
 						<Stack p={ 1 } pl={ 2 } width="100%" direction="row" alignItems="center">
 							<Stack width="100%" direction="row" gap={ 1 }>
 								<PanelHeaderTitle sx={ { display: 'flex', alignItems: 'center', gap: 0.5 } }>
-									<FilterIcon fontSize="inherit" />
-									{ __( 'Variables Manager', 'elementor' ) }
+									<ColorFilterIcon fontSize="inherit" />
+									{ __( 'Variable Manager', 'elementor' ) }
 								</PanelHeaderTitle>
 							</Stack>
 							<CloseButton
@@ -62,15 +73,7 @@ export function VariablesManagerPanel() {
 						} }
 					>
 						<Divider />
-						<Box
-							px={ 2 }
-							sx={ {
-								flexGrow: 1,
-								overflowY: 'auto',
-							} }
-						>
-							List
-						</Box>
+						<VariablesManagerTable menuActions={ menuActions } />
 					</PanelBody>
 
 					<PanelFooter>

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

@@ -0,0 +1,172 @@
+import * as React from 'react';
+import { createElement, useState } from 'react';
+import { EllipsisWithTooltip } from '@elementor/editor-ui';
+import { GripVerticalIcon } from '@elementor/icons';
+import {
+	IconButton,
+	Stack,
+	type SxProps,
+	Table,
+	TableBody,
+	TableContainer,
+	TableHead,
+	TableRow,
+	UnstableSortableItem,
+	type UnstableSortableItemRenderProps,
+	UnstableSortableProvider,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { getVariables } from '../../hooks/use-prop-variables';
+import { getVariableType } from '../../variables-registry/variable-type-registry';
+import { VariableEditMenu, type VariableManagerMenuAction } from './variable-edit-menu';
+import { VariableTableCell } from './variable-table-cell';
+
+type Props = {
+	menuActions: VariableManagerMenuAction[];
+};
+
+export const VariablesManagerTable = ( { menuActions }: Props ) => {
+	const variables = getVariables( false );
+
+	const [ ids, setIds ] = useState< string[] >( Object.keys( variables ) );
+	const rows = ids.map( ( id ) => ( {
+		id,
+		name: variables[ id ].label,
+		value: variables[ id ].value,
+		type: variables[ id ].type,
+		icon: getVariableType( variables[ id ].type ).icon,
+		startIcon: getVariableType( variables[ id ].type ).startIcon,
+	} ) );
+
+	const tableSX: SxProps = {
+		minWidth: 250,
+		tableLayout: 'fixed',
+	};
+
+	return (
+		<TableContainer sx={ { overflow: 'initial' } }>
+			<Table sx={ tableSX } aria-label="Variables manager list with drag and drop reordering">
+				<TableHead>
+					<TableRow>
+						<VariableTableCell isHeader noPadding width={ 10 } maxWidth={ 10 } />
+						<VariableTableCell isHeader>{ __( 'Name', 'elementor' ) }</VariableTableCell>
+						<VariableTableCell isHeader>{ __( 'Value', 'elementor' ) }</VariableTableCell>
+						<VariableTableCell isHeader noPadding width={ 16 } maxWidth={ 16 } />
+					</TableRow>
+				</TableHead>
+				<TableBody>
+					<UnstableSortableProvider
+						value={ ids }
+						onChange={ setIds }
+						variant="static"
+						restrictAxis
+						dragOverlay={ ( { children: dragOverlayChildren, ...dragOverlayProps } ) => (
+							<Table sx={ tableSX } { ...dragOverlayProps }>
+								<TableBody>{ dragOverlayChildren }</TableBody>
+							</Table>
+						) }
+					>
+						{ rows.map( ( row ) => (
+							<UnstableSortableItem
+								key={ row.id }
+								id={ row.id }
+								render={ ( {
+									itemProps,
+									showDropIndication,
+									triggerProps,
+									itemStyle,
+									triggerStyle,
+									isDragged,
+									dropPosition,
+									setTriggerRef,
+									isDragOverlay,
+									isSorting,
+									index,
+								}: UnstableSortableItemRenderProps ) => {
+									const showIndicationBefore = showDropIndication && dropPosition === 'before';
+									const showIndicationAfter = showDropIndication && dropPosition === 'after';
+
+									return (
+										<TableRow
+											{ ...itemProps }
+											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 } }
+											disableDivider={ isDragOverlay || index === rows.length - 1 }
+										>
+											<VariableTableCell noPadding width={ 10 } maxWidth={ 10 }>
+												<IconButton
+													size="small"
+													ref={ setTriggerRef }
+													{ ...triggerProps }
+													disabled={ isSorting }
+													draggable
+												>
+													<GripVerticalIcon fontSize="inherit" />
+												</IconButton>
+											</VariableTableCell>
+											<VariableTableCell>
+												<Stack direction="row" alignItems="center" gap={ 1 }>
+													{ createElement( row.icon, { fontSize: 'inherit' } ) }
+													<EllipsisWithTooltip title={ row.name }>
+														{ row.name }
+													</EllipsisWithTooltip>
+												</Stack>
+											</VariableTableCell>
+											<VariableTableCell>
+												<Stack direction="row" alignItems="center" gap={ 1 }>
+													{ row.startIcon && row.startIcon( { value: row.value } ) }
+
+													<EllipsisWithTooltip title={ row.value }>
+														{ row.value }
+													</EllipsisWithTooltip>
+												</Stack>
+											</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 }
+													/>
+												</Stack>
+											</VariableTableCell>
+										</TableRow>
+									);
+								} }
+							/>
+						) ) }
+					</UnstableSortableProvider>
+				</TableBody>
+			</Table>
+		</TableContainer>
+	);
+};

package/src/hooks/use-prop-variables.ts

@@ -6,9 +6,19 @@ import { useVariableType } from '../context/variable-type-context';
 import { service } from '../service';
 import { type NormalizedVariable, type Variable } from '../types';
 
-export const useVariable = ( key: string ) => {
+export const getVariables = ( includeDeleted = true ) => {
 	const variables = service.variables();
 
+	if ( includeDeleted ) {
+		return variables;
+	}
+
+	return Object.fromEntries( Object.entries( variables ).filter( ( [ , variable ] ) => ! variable.deleted ) );
+};
+
+export const useVariable = ( key: string ) => {
+	const variables = getVariables();
+
 	if ( ! variables?.[ key ] ) {
 		return null;
 	}
@@ -48,13 +58,11 @@ const usePropVariables = ( propKey: PropKey ): NormalizedVariable[] => {
 	return useMemo( () => normalizeVariables( propKey ), [ propKey ] );
 };
 
-const isNotDeleted = ( { deleted }: { deleted?: boolean } ) => ! deleted;
-
-const normalizeVariables = ( propKey: string ): NormalizedVariable[] => {
-	const variables = service.variables();
+const normalizeVariables = ( propKey: string ) => {
+	const variables = getVariables( false );
 
 	return Object.entries( variables )
-		.filter( ( [ , variable ] ) => variable.type === propKey && isNotDeleted( variable ) )
+		.filter( ( [ , variable ] ) => variable.type === propKey )
 		.map( ( [ key, { label, value } ] ) => ( {
 			key,
 			label,