@elementor/editor-variables 0.18.0 → 3.32.0-21

package/src/components/variable-restore.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { PopoverContent, useBoundProp } from '@elementor/editor-controls';
+import { PopoverBody } from '@elementor/editor-editing-panel';
+import { PopoverHeader } from '@elementor/editor-ui';
+import { Button, CardActions, Divider, FormHelperText } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { PopoverContentRefContextProvider } from '../context/variable-selection-popover.context';
+import { useVariableType } from '../context/variable-type-context';
+import { restoreVariable, useVariable } from '../hooks/use-prop-variables';
+import { ERROR_MESSAGES, mapServerError } from '../utils/validations';
+import { LabelField, useLabelError } from './fields/label-field';
+
+const SIZE = 'tiny';
+
+type Props = {
+	variableId: string;
+	onClose: () => void;
+	onSubmit?: () => void;
+};
+
+export const VariableRestore = ( { variableId, onClose, onSubmit }: Props ) => {
+	const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
+
+	const { setValue: notifyBoundPropChange } = useBoundProp( propTypeUtil );
+
+	const variable = useVariable( variableId );
+
+	if ( ! variable ) {
+		throw new Error( `Global ${ variableType } variable not found` );
+	}
+
+	const [ errorMessage, setErrorMessage ] = useState( '' );
+	const [ label, setLabel ] = useState( variable.label );
+	const [ value, setValue ] = useState( variable.value );
+
+	const { labelFieldError, setLabelFieldError } = useLabelError( {
+		value: variable.label,
+		message: ERROR_MESSAGES.DUPLICATED_LABEL,
+	} );
+
+	const handleRestore = () => {
+		restoreVariable( variableId, label, value )
+			.then( () => {
+				notifyBoundPropChange( variableId );
+				onSubmit?.();
+			} )
+			.catch( ( error ) => {
+				const mappedError = mapServerError( error );
+				if ( mappedError && 'label' === mappedError.field ) {
+					setLabel( '' );
+					setLabelFieldError( {
+						value: label,
+						message: mappedError.message,
+					} );
+					return;
+				}
+
+				setErrorMessage( ERROR_MESSAGES.UNEXPECTED_ERROR );
+			} );
+	};
+
+	const hasEmptyValues = () => {
+		return ! value.trim() || ! label.trim();
+	};
+
+	const noValueChanged = () => {
+		return value === variable.value && label === variable.label;
+	};
+
+	const hasErrors = () => {
+		return !! errorMessage;
+	};
+
+	const isSubmitDisabled = noValueChanged() || hasEmptyValues() || hasErrors();
+
+	return (
+		<PopoverContentRefContextProvider>
+			<PopoverBody height="auto">
+				<PopoverHeader
+					icon={ <VariableIcon fontSize={ SIZE } /> }
+					title={ __( 'Restore variable', 'elementor' ) }
+					onClose={ onClose }
+				/>
+
+				<Divider />
+
+				<PopoverContent p={ 2 }>
+					<LabelField
+						value={ label }
+						error={ labelFieldError }
+						onChange={ ( newValue ) => {
+							setLabel( newValue );
+							setErrorMessage( '' );
+						} }
+					/>
+					<ValueField
+						value={ value }
+						onChange={ ( newValue ) => {
+							setValue( newValue );
+							setErrorMessage( '' );
+						} }
+					/>
+
+					{ errorMessage && <FormHelperText error>{ errorMessage }</FormHelperText> }
+				</PopoverContent>
+
+				<CardActions sx={ { pt: 0.5, pb: 1 } }>
+					<Button size="small" variant="contained" disabled={ isSubmitDisabled } onClick={ handleRestore }>
+						{ __( 'Restore', 'elementor' ) }
+					</Button>
+				</CardActions>
+			</PopoverBody>
+		</PopoverContentRefContextProvider>
+	);
+};

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

@@ -1,17 +1,16 @@
 import * as React from 'react';
-import { useRef, useState } from 'react';
-import { Box } from '@elementor/ui';
+import { useState } from 'react';
+import type { PropTypeKey } from '@elementor/editor-props';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 
-import { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';
-import { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';
+import { PopoverContentRefContextProvider } from '../context/variable-selection-popover.context';
+import { VariableTypeProvider } from '../context/variable-type-context';
+import { usePermissions } from '../hooks/use-permissions';
 import { type Variable } from '../types';
-import { ColorVariableCreation } from './color-variable-creation';
-import { ColorVariableEdit } from './color-variable-edit';
-import { ColorVariablesSelection } from './color-variables-selection';
-import { FontVariableCreation } from './font-variable-creation';
-import { FontVariableEdit } from './font-variable-edit';
-import { FontVariablesSelection } from './font-variables-selection';
-import { PopoverContentRefContext } from './variable-selection-popover.context';
+import { VariableCreation } from './variable-creation';
+import { VariableEdit } from './variable-edit';
+import { usePanelActions } from './variables-manager/variables-manager-panel';
+import { VariablesSelection } from './variables-selection';
 
 const VIEW_LIST = 'list';
 const VIEW_ADD = 'add';
@@ -21,121 +20,121 @@ type View = typeof VIEW_LIST | typeof VIEW_ADD | typeof VIEW_EDIT;
 
 type Props = {
 	closePopover: () => void;
-	propTypeKey: string;
 	selectedVariable?: Variable;
+	propTypeKey: PropTypeKey;
 };
 
 export const VariableSelectionPopover = ( { closePopover, propTypeKey, selectedVariable }: Props ) => {
 	const [ currentView, setCurrentView ] = useState< View >( VIEW_LIST );
-	const editIdRef = useRef< string >( '' );
-	const anchorRef = useRef< HTMLDivElement >( null );
+	const [ editId, setEditId ] = useState< string >( '' );
+	const { open } = usePanelActions();
+	const onSettingsAvailable = isExperimentActive( 'e_variables_settings' )
+		? () => {
+				open();
+		  }
+		: undefined;
 
 	return (
-		<PopoverContentRefContext.Provider value={ anchorRef }>
-			<Box ref={ anchorRef }>
-				{ renderStage( {
+		<VariableTypeProvider propTypeKey={ propTypeKey }>
+			<PopoverContentRefContextProvider>
+				{ RenderView( {
 					propTypeKey,
 					currentView,
 					selectedVariable,
-					editIdRef,
+					editId,
+					setEditId,
 					setCurrentView,
 					closePopover,
+					onSettings: onSettingsAvailable,
 				} ) }
-			</Box>
-		</PopoverContentRefContext.Provider>
+			</PopoverContentRefContextProvider>
+		</VariableTypeProvider>
 	);
 };
 
-type StageProps = {
+type ViewProps = {
 	propTypeKey: string;
 	currentView: View;
 	selectedVariable?: Variable;
-	editIdRef: React.MutableRefObject< string >;
+	editId: string;
+	setEditId: ( id: string ) => void;
 	setCurrentView: ( stage: View ) => void;
 	closePopover: () => void;
+	onSettings?: () => void;
 };
 
-function renderStage( props: StageProps ): React.ReactNode {
-	const handleSubmitOnEdit = () => {
-		if ( props?.selectedVariable?.key === props.editIdRef.current ) {
+type Handlers = {
+	onClose: () => void;
+	onGoBack?: () => void;
+	onAdd?: () => void;
+	onEdit?: ( key: string ) => void;
+	onSettings?: () => void;
+};
+
+function RenderView( props: ViewProps ): React.ReactNode {
+	const userPermissions = usePermissions();
+
+	const handlers: Handlers = {
+		onClose: () => {
 			props.closePopover();
-		} else {
+		},
+		onGoBack: () => {
 			props.setCurrentView( VIEW_LIST );
-		}
+		},
 	};
 
-	if ( fontVariablePropTypeUtil.key === props.propTypeKey ) {
-		if ( VIEW_LIST === props.currentView ) {
-			return (
-				<FontVariablesSelection
-					closePopover={ props.closePopover }
-					onAdd={ () => {
-						props.setCurrentView( VIEW_ADD );
-					} }
-					onEdit={ ( key ) => {
-						props.editIdRef.current = key;
-						props.setCurrentView( VIEW_EDIT );
-					} }
-				/>
-			);
-		}
+	if ( userPermissions.canAdd() ) {
+		handlers.onAdd = () => {
+			props.setCurrentView( VIEW_ADD );
+		};
+	}
 
-		if ( VIEW_ADD === props.currentView ) {
-			return (
-				<FontVariableCreation
-					onGoBack={ () => props.setCurrentView( VIEW_LIST ) }
-					onClose={ props.closePopover }
-				/>
-			);
-		}
+	if ( userPermissions.canEdit() ) {
+		handlers.onEdit = ( key: string ) => {
+			props.setEditId( key );
+			props.setCurrentView( VIEW_EDIT );
+		};
+	}
 
-		if ( VIEW_EDIT === props.currentView ) {
-			return (
-				<FontVariableEdit
-					editId={ props.editIdRef.current ?? '' }
-					onGoBack={ () => props.setCurrentView( VIEW_LIST ) }
-					onClose={ props.closePopover }
-					onSubmit={ handleSubmitOnEdit }
-				/>
-			);
-		}
+	if ( userPermissions.canManageSettings() && props.onSettings ) {
+		handlers.onSettings = () => {
+			props.onSettings?.();
+			props.closePopover();
+		};
 	}
 
-	if ( colorVariablePropTypeUtil.key === props.propTypeKey ) {
-		if ( VIEW_LIST === props.currentView ) {
-			return (
-				<ColorVariablesSelection
-					closePopover={ props.closePopover }
-					onAdd={ () => {
-						props.setCurrentView( VIEW_ADD );
-					} }
-					onEdit={ ( key ) => {
-						props.editIdRef.current = key;
-						props.setCurrentView( VIEW_EDIT );
-					} }
-				/>
-			);
+	const handleSubmitOnEdit = () => {
+		if ( props?.selectedVariable?.key === props.editId ) {
+			handlers.onClose();
+		} else {
+			handlers.onGoBack?.();
 		}
+	};
 
-		if ( VIEW_ADD === props.currentView ) {
-			return (
-				<ColorVariableCreation
-					onGoBack={ () => props.setCurrentView( VIEW_LIST ) }
-					onClose={ props.closePopover }
-				/>
-			);
-		}
+	if ( VIEW_LIST === props.currentView ) {
+		return (
+			<VariablesSelection
+				closePopover={ handlers.onClose }
+				onAdd={ handlers.onAdd }
+				onEdit={ handlers.onEdit }
+				onSettings={ handlers.onSettings }
+			/>
+		);
+	}
 
-		if ( VIEW_EDIT === props.currentView ) {
-			return (
-				<ColorVariableEdit
-					editId={ props.editIdRef.current ?? '' }
-					onGoBack={ () => props.setCurrentView( VIEW_LIST ) }
-					onClose={ props.closePopover }
-					onSubmit={ handleSubmitOnEdit }
-				/>
-			);
-		}
+	if ( VIEW_ADD === props.currentView ) {
+		return <VariableCreation onGoBack={ handlers.onGoBack } onClose={ handlers.onClose } />;
+	}
+
+	if ( VIEW_EDIT === props.currentView ) {
+		return (
+			<VariableEdit
+				editId={ props.editId }
+				onGoBack={ handlers.onGoBack }
+				onClose={ handlers.onClose }
+				onSubmit={ handleSubmitOnEdit }
+			/>
+		);
 	}
 
 	return null;

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

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import { useEffect } from 'react';
+import {
+	__createPanel as createPanel,
+	Panel,
+	PanelBody,
+	PanelFooter,
+	PanelHeader,
+	PanelHeaderTitle,
+} from '@elementor/editor-panels';
+import { ThemeProvider } from '@elementor/editor-ui';
+import { changeEditMode } from '@elementor/editor-v1-adapters';
+import { FilterIcon, XIcon } from '@elementor/icons';
+import { Alert, Box, Button, Divider, ErrorBoundary, IconButton, type IconButtonProps, Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+const id = 'variables-manager';
+
+export const { panel, usePanelActions } = createPanel( {
+	id,
+	component: VariablesManagerPanel,
+	allowedEditModes: [ 'edit', id ],
+	onOpen: () => {
+		changeEditMode( id );
+	},
+	onClose: () => {
+		changeEditMode( 'edit' );
+	},
+} );
+
+export function VariablesManagerPanel() {
+	const { close: closePanel } = usePanelActions();
+	const isDirty = false;
+
+	usePreventUnload( isDirty );
+
+	return (
+		<ThemeProvider>
+			<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>
+				<Panel>
+					<PanelHeader>
+						<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' ) }
+								</PanelHeaderTitle>
+							</Stack>
+							<CloseButton
+								sx={ { marginLeft: 'auto' } }
+								onClose={ () => {
+									closePanel();
+								} }
+							/>
+						</Stack>
+					</PanelHeader>
+					<PanelBody
+						sx={ {
+							display: 'flex',
+							flexDirection: 'column',
+							height: '100%',
+						} }
+					>
+						<Divider />
+						<Box
+							px={ 2 }
+							sx={ {
+								flexGrow: 1,
+								overflowY: 'auto',
+							} }
+						>
+							List
+						</Box>
+					</PanelBody>
+
+					<PanelFooter>
+						<Button fullWidth size="small" color="global" variant="contained" disabled={ ! isDirty }>
+							{ __( 'Save changes', 'elementor' ) }
+						</Button>
+					</PanelFooter>
+				</Panel>
+			</ErrorBoundary>
+		</ThemeProvider>
+	);
+}
+
+const CloseButton = ( { onClose, ...props }: IconButtonProps & { onClose: () => void } ) => (
+	<IconButton size="small" color="secondary" onClick={ onClose } aria-label="Close" { ...props }>
+		<XIcon fontSize="small" />
+	</IconButton>
+);
+
+const ErrorBoundaryFallback = () => (
+	<Box role="alert" sx={ { minHeight: '100%', p: 2 } }>
+		<Alert severity="error" sx={ { mb: 2, maxWidth: 400, textAlign: 'center' } }>
+			<strong>{ __( 'Something went wrong', 'elementor' ) }</strong>
+		</Alert>
+	</Box>
+);
+
+const usePreventUnload = ( isDirty: boolean ) => {
+	useEffect( () => {
+		const handleBeforeUnload = ( event: BeforeUnloadEvent ) => {
+			if ( isDirty ) {
+				event.preventDefault();
+			}
+		};
+
+		window.addEventListener( 'beforeunload', handleBeforeUnload );
+
+		return () => {
+			window.removeEventListener( 'beforeunload', handleBeforeUnload );
+		};
+	}, [ isDirty ] );
+};

package/src/components/{font-variables-selection.tsx → variables-selection.tsx}

@@ -3,13 +3,14 @@ import { useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
 import { PopoverBody } from '@elementor/editor-editing-panel';
 import { PopoverHeader, PopoverMenuList, PopoverSearch, type VirtualizedItem } from '@elementor/editor-ui';
-import { ColorFilterIcon, PlusIcon, SettingsIcon, TextIcon } from '@elementor/icons';
+import { ColorFilterIcon, PlusIcon, SettingsIcon } from '@elementor/icons';
 import { Divider, IconButton } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
+import { useVariableType } from '../context/variable-type-context';
 import { useFilteredVariables } from '../hooks/use-prop-variables';
-import { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';
 import { type ExtendedVirtualizedItem } from '../types';
+import { trackVariableEvent } from '../utils/tracking';
 import { MenuItemContent } from './ui/menu-item-content';
 import { NoSearchResults } from './ui/no-search-results';
 import { NoVariables } from './ui/no-variables';
@@ -24,26 +25,42 @@ type Props = {
 	onSettings?: () => void;
 };
 
-export const FontVariablesSelection = ( { closePopover, onAdd, onEdit, onSettings }: Props ) => {
-	const { value: variable, setValue: setVariable } = useBoundProp( fontVariablePropTypeUtil );
+export const VariablesSelection = ( { closePopover, onAdd, onEdit, onSettings }: Props ) => {
+	const { icon: VariableIcon, startIcon, variableType, propTypeUtil } = useVariableType();
+
+	const { value: variable, setValue: setVariable, path } = useBoundProp( propTypeUtil );
 	const [ searchValue, setSearchValue ] = useState( '' );
 
 	const {
 		list: variables,
 		hasMatches: hasSearchResults,
 		isSourceNotEmpty: hasVariables,
-	} = useFilteredVariables( searchValue, fontVariablePropTypeUtil.key );
+	} = useFilteredVariables( searchValue, propTypeUtil.key );
 
 	const handleSetVariable = ( key: string ) => {
 		setVariable( key );
+		trackVariableEvent( {
+			varType: variableType,
+			controlPath: path.join( '.' ),
+			action: 'connect',
+		} );
 		closePopover();
 	};
 
+	const onAddAndTrack = () => {
+		onAdd?.();
+		trackVariableEvent( {
+			varType: variableType,
+			controlPath: path.join( '.' ),
+			action: 'add',
+		} );
+	};
+
 	const actions = [];
 
 	if ( onAdd ) {
 		actions.push(
-			<IconButton key="add" size={ SIZE } onClick={ onAdd }>
+			<IconButton key="add" size={ SIZE } onClick={ onAddAndTrack }>
 				<PlusIcon fontSize={ SIZE } />
 			</IconButton>
 		);
@@ -57,13 +74,15 @@ export const FontVariablesSelection = ( { closePopover, onAdd, onEdit, onSetting
 		);
 	}
 
+	const StartIcon = startIcon || ( () => <VariableIcon fontSize={ SIZE } /> );
+
 	const items: ExtendedVirtualizedItem[] = variables.map( ( { value, label, key } ) => ( {
 		type: 'item' as const,
 		value: key,
 		label,
-		icon: <TextIcon fontSize={ SIZE } />,
+		icon: <StartIcon value={ value } />,
 		secondaryText: value,
-		onEdit: () => onEdit?.( key ),
+		onEdit: onEdit ? () => onEdit?.( key ) : undefined,
 	} ) );
 
 	const handleSearch = ( search: string ) => {
@@ -74,12 +93,18 @@ export const FontVariablesSelection = ( { closePopover, onAdd, onEdit, onSetting
 		setSearchValue( '' );
 	};
 
+	const noVariableTitle = sprintf(
+		/* translators: %s: Variable Type. */
+		__( 'Create your first %s variable', 'elementor' ),
+		variableType
+	);
+
 	return (
 		<PopoverBody>
 			<PopoverHeader
 				title={ __( 'Variables', 'elementor' ) }
-				onClose={ closePopover }
 				icon={ <ColorFilterIcon fontSize={ SIZE } /> }
+				onClose={ closePopover }
 				actions={ actions }
 			/>
 
@@ -99,7 +124,7 @@ export const FontVariablesSelection = ( { closePopover, onAdd, onEdit, onSetting
 					onSelect={ handleSetVariable }
 					onClose={ () => {} }
 					selectedValue={ variable }
-					data-testid="font-variables-list"
+					data-testid={ `${ variableType }-variables-list` }
 					menuListTemplate={ VariablesStyledMenuList }
 					menuItemContentTemplate={ ( item: VirtualizedItem< 'item', string > ) => (
 						<MenuItemContent item={ item } />
@@ -111,16 +136,12 @@ export const FontVariablesSelection = ( { closePopover, onAdd, onEdit, onSetting
 				<NoSearchResults
 					searchValue={ searchValue }
 					onClear={ handleClearSearch }
-					icon={ <TextIcon fontSize="large" /> }
+					icon={ <VariableIcon fontSize="large" /> }
 				/>
 			) }
 
 			{ ! hasVariables && (
-				<NoVariables
-					title={ __( 'Create your first font variable', 'elementor' ) }
-					icon={ <TextIcon fontSize="large" /> }
-					onAdd={ onAdd }
-				/>
+				<NoVariables title={ noVariableTitle } icon={ <VariableIcon fontSize="large" /> } onAdd={ onAdd } />
 			) }
 		</PopoverBody>
 	);

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { createContext, type PropsWithChildren, type RefObject, useContext, useState } from 'react';
+import { Box } from '@elementor/ui';
+
+const PopoverContentRefContext = createContext< RefObject< HTMLDivElement > | null >( null );
+
+export const PopoverContentRefContextProvider = ( { children }: PropsWithChildren ) => {
+	const [ anchorRef, setAnchorRef ] = useState< RefObject< HTMLDivElement > | null >( null );
+
+	return (
+		<PopoverContentRefContext.Provider value={ anchorRef }>
+			<Box ref={ setAnchorRef }>{ children }</Box>
+		</PopoverContentRefContext.Provider>
+	);
+};
+
+export const usePopoverContentRef = () => {
+	return useContext( PopoverContentRefContext );
+};

package/src/context/variable-type-context.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { createContext, type PropsWithChildren, useContext } from 'react';
+import { type PropTypeKey } from '@elementor/editor-props';
+
+import { getVariableType } from '../variables-registry/variable-type-registry';
+
+type Props = PropsWithChildren< { propTypeKey: PropTypeKey } >;
+
+const VariableTypeContext = createContext< PropTypeKey | null >( null );
+
+export function VariableTypeProvider( { children, propTypeKey }: Props ) {
+	return <VariableTypeContext.Provider value={ propTypeKey }>{ children }</VariableTypeContext.Provider>;
+}
+
+export function useVariableType() {
+	const context = useContext( VariableTypeContext );
+
+	if ( context === null ) {
+		throw new Error( 'useVariableType must be used within a VariableTypeProvider' );
+	}
+
+	return getVariableType( context );
+}

package/src/controls/variable-control.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { useBoundProp } from '@elementor/editor-controls';
+import { type TransformablePropValue } from '@elementor/editor-props';
+
+import { AssignedVariable } from '../components/ui/variable/assigned-variable';
+import { DeletedVariable } from '../components/ui/variable/deleted-variable';
+import { MissingVariable } from '../components/ui/variable/missing-variable';
+import { useVariable } from '../hooks/use-prop-variables';
+
+export const VariableControl = () => {
+	const boundProp = useBoundProp().value as TransformablePropValue< string, string >;
+
+	const assignedVariable = useVariable( boundProp?.value );
+
+	if ( ! assignedVariable ) {
+		return <MissingVariable />;
+	}
+
+	const { $$type: propTypeKey } = boundProp;
+
+	if ( assignedVariable?.deleted ) {
+		return <DeletedVariable variable={ assignedVariable } propTypeKey={ propTypeKey } />;
+	}
+
+	return <AssignedVariable variable={ assignedVariable } propTypeKey={ propTypeKey } />;
+};