@elementor/editor-variables 0.14.0 → 0.16.0

package/src/components/ui/tags/assigned-tag.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { DetachIcon } from '@elementor/icons';
+import { Box, IconButton, Stack, Typography, UnstableTag as Tag, type UnstableTagProps } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+export const SIZE = 'tiny';
+
+interface VariableTagProps extends UnstableTagProps {
+	onUnlink?: () => void;
+}
+
+export const AssignedTag = ( { startIcon, label, onUnlink, ...props }: VariableTagProps ) => {
+	const actions = [];
+
+	if ( onUnlink ) {
+		actions.push(
+			<IconButton key="unlink" size={ SIZE } onClick={ onUnlink } aria-label={ __( 'Unlink', 'elementor' ) }>
+				<DetachIcon fontSize={ SIZE } />
+			</IconButton>
+		);
+	}
+
+	return (
+		<Tag
+			fullWidth
+			showActionsOnHover
+			startIcon={
+				<Stack gap={ 0.5 } direction="row" alignItems="center">
+					{ startIcon }
+				</Stack>
+			}
+			label={
+				<Box sx={ { display: 'inline-grid', minWidth: 0 } }>
+					<Typography sx={ { lineHeight: 1.34 } } variant="caption" noWrap>
+						{ label }
+					</Typography>
+				</Box>
+			}
+			actions={ actions }
+			{ ...props }
+		/>
+	);
+};

package/src/components/ui/tags/deleted-tag.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { ColorFilterIcon } from '@elementor/icons';
+import { Box, Typography, UnstableTag as Tag, type UnstableTagProps } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+export const DeletedTag = ( { label }: UnstableTagProps ) => {
+	return (
+		<Tag
+			showActionsOnHover
+			fullWidth
+			label={
+				<Box sx={ { display: 'inline-grid', minWidth: 0 } }>
+					<Typography sx={ { lineHeight: 1.34 } } variant="caption" noWrap>
+						{ label }
+					</Typography>
+				</Box>
+			}
+			startIcon={ <ColorFilterIcon fontSize="tiny" /> }
+			endAdornment={
+				<Typography sx={ { lineHeight: 1.34 } } variant="caption" noWrap>
+					({ __( 'deleted', 'elementor' ) })
+				</Typography>
+			}
+		/>
+	);
+};

package/src/components/ui/variable/assigned-variable.tsx

@@ -0,0 +1,70 @@
+import { useId, useRef } from 'react';
+import * as React from 'react';
+import { useBoundProp } from '@elementor/editor-controls';
+import { type PropTypeUtil } from '@elementor/editor-props';
+import { ColorFilterIcon } from '@elementor/icons';
+import { bindPopover, bindTrigger, Box, Popover, usePopupState } from '@elementor/ui';
+
+import { type Variable } from '../../../types';
+import { VariableSelectionPopover } from '../../variable-selection-popover';
+import { AssignedTag, SIZE } from '../tags/assigned-tag';
+
+type Props = {
+	variablePropTypeUtil: PropTypeUtil< string, string >;
+	fallbackPropTypeUtil: PropTypeUtil< string, string | null > | PropTypeUtil< string, string >;
+	additionalStartIcon?: React.ReactNode;
+	variable: Variable;
+};
+
+export const AssignedVariable = ( {
+	variable,
+	variablePropTypeUtil,
+	fallbackPropTypeUtil,
+	additionalStartIcon,
+}: Props ) => {
+	const { setValue } = useBoundProp();
+	const anchorRef = useRef< HTMLDivElement >( null );
+
+	const popupId = useId();
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: `elementor-variables-list-${ popupId }`,
+	} );
+
+	const unlinkVariable = () => {
+		setValue( fallbackPropTypeUtil.create( variable.value ) );
+	};
+
+	return (
+		<Box ref={ anchorRef }>
+			<AssignedTag
+				label={ variable.label }
+				startIcon={
+					<>
+						<ColorFilterIcon fontSize={ SIZE } />
+
+						{ additionalStartIcon }
+					</>
+				}
+				onUnlink={ unlinkVariable }
+				{ ...bindTrigger( popupState ) }
+			/>
+			<Popover
+				disableScrollLock
+				anchorEl={ anchorRef.current }
+				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
+				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
+				PaperProps={ {
+					sx: { my: 1 },
+				} }
+				{ ...bindPopover( popupState ) }
+			>
+				<VariableSelectionPopover
+					selectedVariable={ variable }
+					closePopover={ popupState.close }
+					propTypeKey={ variablePropTypeUtil.key }
+				/>
+			</Popover>
+		</Box>
+	);
+};

package/src/components/ui/variable/deleted-variable.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { Box } from '@elementor/ui';
+
+import { type Variable } from '../../../types';
+import { DeletedTag } from '../tags/deleted-tag';
+
+type Props = {
+	variable: Variable;
+};
+
+export const DeletedVariable = ( { variable }: Props ) => {
+	const anchorRef = useRef< HTMLDivElement >( null );
+
+	return (
+		<Box ref={ anchorRef }>
+			<DeletedTag label={ variable.label } />
+		</Box>
+	);
+};

package/src/components/variable-selection-popover.context.ts

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+
+export const PopoverContentRefContext = createContext< React.RefObject< HTMLDivElement > | null >( null );
+
+export const usePopoverContentRef = () => {
+	return useContext( PopoverContentRefContext );
+};

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useRef, useState } from 'react';
+import { Box } from '@elementor/ui';
 
 import { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';
 import { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';
@@ -10,6 +11,7 @@ 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';
 
 const VIEW_LIST = 'list';
 const VIEW_ADD = 'add';
@@ -26,15 +28,22 @@ type Props = {
 export const VariableSelectionPopover = ( { closePopover, propTypeKey, selectedVariable }: Props ) => {
 	const [ currentView, setCurrentView ] = useState< View >( VIEW_LIST );
 	const editIdRef = useRef< string >( '' );
+	const anchorRef = useRef< HTMLDivElement >( null );
 
-	return renderStage( {
-		propTypeKey,
-		currentView,
-		selectedVariable,
-		editIdRef,
-		setCurrentView,
-		closePopover,
-	} );
+	return (
+		<PopoverContentRefContext.Provider value={ anchorRef }>
+			<Box ref={ anchorRef }>
+				{ renderStage( {
+					propTypeKey,
+					currentView,
+					selectedVariable,
+					editIdRef,
+					setCurrentView,
+					closePopover,
+				} ) }
+			</Box>
+		</PopoverContentRefContext.Provider>
+	);
 };
 
 type StageProps = {

package/src/controls/color-variable-control.tsx

@@ -1,90 +1,33 @@
 import * as React from 'react';
-import { useId, useRef } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
 import { colorPropTypeUtil } from '@elementor/editor-props';
-import { ColorFilterIcon, DetachIcon } from '@elementor/icons';
-import {
-	bindPopover,
-	bindTrigger,
-	Box,
-	IconButton,
-	Popover,
-	Stack,
-	Typography,
-	UnstableTag as Tag,
-	usePopupState,
-} from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
 
 import { ColorIndicator } from '../components/ui/color-indicator';
-import { VariableSelectionPopover } from '../components/variable-selection-popover';
+import { AssignedVariable } from '../components/ui/variable/assigned-variable';
+import { DeletedVariable } from '../components/ui/variable/deleted-variable';
 import { useVariable } from '../hooks/use-prop-variables';
 import { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';
 
-const SIZE = 'tiny';
-
 export const ColorVariableControl = () => {
-	const { setValue: setColor } = useBoundProp();
 	const { value: variableValue } = useBoundProp( colorVariablePropTypeUtil );
+	const assignedVariable = useVariable( variableValue );
 
-	const anchorRef = useRef< HTMLDivElement >( null );
-
-	const popupId = useId();
-	const popupState = usePopupState( {
-		variant: 'popover',
-		popupId: `elementor-variables-list-${ popupId }`,
-	} );
-
-	const selectedVariable = useVariable( variableValue );
-	if ( ! selectedVariable ) {
+	if ( ! assignedVariable ) {
 		throw new Error( `Global color variable ${ variableValue } not found` );
 	}
 
-	const unlinkVariable = () => {
-		setColor( colorPropTypeUtil.create( selectedVariable.value ) );
-	};
+	const isVariableDeleted = assignedVariable?.deleted;
+
+	if ( isVariableDeleted ) {
+		return <DeletedVariable variable={ assignedVariable } />;
+	}
 
 	return (
-		<Box ref={ anchorRef }>
-			<Tag
-				fullWidth
-				showActionsOnHover
-				startIcon={
-					<Stack spacing={ 0.75 } direction="row" alignItems="center">
-						<ColorIndicator size="inherit" value={ selectedVariable.value } component="span" />
-						<ColorFilterIcon fontSize="inherit" sx={ { mr: 1 } } />
-					</Stack>
-				}
-				label={
-					<Box sx={ { display: 'inline-grid', minWidth: 0 } }>
-						<Typography
-							sx={ { textOverflow: 'ellipsis', overflowX: 'hidden', lineHeight: 1 } }
-							variant="caption"
-						>
-							{ selectedVariable.label }
-						</Typography>
-					</Box>
-				}
-				actions={
-					<IconButton size={ SIZE } onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>
-						<DetachIcon fontSize={ SIZE } />
-					</IconButton>
-				}
-				{ ...bindTrigger( popupState ) }
-			/>
-			<Popover
-				disableScrollLock
-				anchorEl={ anchorRef.current }
-				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
-				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
-				{ ...bindPopover( popupState ) }
-			>
-				<VariableSelectionPopover
-					selectedVariable={ selectedVariable }
-					closePopover={ popupState.close }
-					propTypeKey={ colorVariablePropTypeUtil.key }
-				/>
-			</Popover>
-		</Box>
+		<AssignedVariable
+			variable={ assignedVariable }
+			variablePropTypeUtil={ colorVariablePropTypeUtil }
+			fallbackPropTypeUtil={ colorPropTypeUtil }
+			additionalStartIcon={ <ColorIndicator size="inherit" value={ assignedVariable.value } component="span" /> }
+		/>
 	);
 };

package/src/controls/font-variable-control.tsx

@@ -1,88 +1,31 @@
 import * as React from 'react';
-import { useId, useRef } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
 import { stringPropTypeUtil } from '@elementor/editor-props';
-import { ColorFilterIcon, DetachIcon } from '@elementor/icons';
-import {
-	bindPopover,
-	bindTrigger,
-	Box,
-	IconButton,
-	Popover,
-	Stack,
-	Typography,
-	UnstableTag as Tag,
-	usePopupState,
-} from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
 
-import { VariableSelectionPopover } from '../components/variable-selection-popover';
+import { AssignedVariable } from '../components/ui/variable/assigned-variable';
+import { DeletedVariable } from '../components/ui/variable/deleted-variable';
 import { useVariable } from '../hooks/use-prop-variables';
 import { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';
 
-const SIZE = 'tiny';
-
 export const FontVariableControl = () => {
-	const { setValue: setFontFamily } = useBoundProp();
 	const { value: variableValue } = useBoundProp( fontVariablePropTypeUtil );
+	const assignedVariable = useVariable( variableValue );
 
-	const anchorRef = useRef< HTMLDivElement >( null );
-
-	const popupId = useId();
-	const popupState = usePopupState( {
-		variant: 'popover',
-		popupId: `elementor-variables-list-${ popupId }`,
-	} );
-
-	const selectedVariable = useVariable( variableValue );
-	if ( ! selectedVariable ) {
+	if ( ! assignedVariable ) {
 		throw new Error( `Global font variable ${ variableValue } not found` );
 	}
 
-	const unlinkVariable = () => {
-		setFontFamily( stringPropTypeUtil.create( selectedVariable.value ) );
-	};
+	const isVariableDeleted = assignedVariable?.deleted;
+
+	if ( isVariableDeleted ) {
+		return <DeletedVariable variable={ assignedVariable } />;
+	}
 
 	return (
-		<Box ref={ anchorRef }>
-			<Tag
-				fullWidth
-				showActionsOnHover
-				startIcon={
-					<Stack spacing={ 0.75 } direction="row" alignItems="center">
-						<ColorFilterIcon fontSize={ 'inherit' } sx={ { mr: 1 } } />
-					</Stack>
-				}
-				label={
-					<Box sx={ { display: 'inline-grid', minWidth: 0 } }>
-						<Typography
-							sx={ { textOverflow: 'ellipsis', overflowX: 'hidden', lineHeight: 1 } }
-							variant="caption"
-						>
-							{ selectedVariable.label }
-						</Typography>
-					</Box>
-				}
-				actions={
-					<IconButton size={ SIZE } onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>
-						<DetachIcon fontSize={ SIZE } />
-					</IconButton>
-				}
-				{ ...bindTrigger( popupState ) }
-			/>
-			<Popover
-				disableScrollLock
-				anchorEl={ anchorRef.current }
-				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
-				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
-				{ ...bindPopover( popupState ) }
-			>
-				<VariableSelectionPopover
-					selectedVariable={ selectedVariable }
-					closePopover={ popupState.close }
-					propTypeKey={ fontVariablePropTypeUtil.key }
-				/>
-			</Popover>
-		</Box>
+		<AssignedVariable
+			variable={ assignedVariable }
+			variablePropTypeUtil={ fontVariablePropTypeUtil }
+			fallbackPropTypeUtil={ stringPropTypeUtil }
+		/>
 	);
 };

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

@@ -2,8 +2,6 @@ import { useMemo } from 'react';
 import { type PropKey } from '@elementor/editor-props';
 
 import { service } from '../service';
-import { type TVariable } from '../storage';
-import { styleVariablesRepository } from '../style-variables-repository';
 import { type Variable } from '../types';
 
 export const useVariable = ( key: string ) => {
@@ -37,13 +35,13 @@ const usePropVariables = ( propKey: PropKey ) => {
 	return useMemo( () => normalizeVariables( propKey ), [ propKey ] );
 };
 
+const isNotDeleted = ( { deleted }: { deleted?: boolean } ) => ! deleted;
+
 const normalizeVariables = ( propKey: string ) => {
 	const variables = service.variables();
 
-	styleVariablesRepository.update( variables );
-
 	return Object.entries( variables )
-		.filter( ( [ , { type } ] ) => type === propKey )
+		.filter( ( [ , variable ] ) => variable.type === propKey && isNotDeleted( variable ) )
 		.map( ( [ key, { label, value } ] ) => ( {
 			key,
 			label,
@@ -52,23 +50,19 @@ const normalizeVariables = ( propKey: string ) => {
 };
 
 export const createVariable = ( newVariable: Variable ): Promise< string > => {
-	return service.create( newVariable ).then( ( { id, variable }: { id: string; variable: TVariable } ) => {
-		styleVariablesRepository.update( {
-			[ id ]: variable,
-		} );
-
+	return service.create( newVariable ).then( ( { id }: { id: string } ) => {
 		return id;
 	} );
 };
 
 export const updateVariable = ( updateId: string, { value, label }: { value: string; label: string } ) => {
-	return service
-		.update( updateId, { value, label } )
-		.then( ( { id, variable }: { id: string; variable: TVariable } ) => {
-			styleVariablesRepository.update( {
-				[ id ]: variable,
-			} );
+	return service.update( updateId, { value, label } ).then( ( { id }: { id: string } ) => {
+		return id;
+	} );
+};
 
-			return id;
-		} );
+export const deleteVariable = ( deleteId: string ) => {
+	return service.delete( deleteId ).then( ( { id }: { id: string } ) => {
+		return id;
+	} );
 };

package/src/init-color-variables.ts

@@ -1,32 +1,16 @@
 import { styleTransformersRegistry } from '@elementor/editor-canvas';
-import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from '@elementor/editor-controls';
 import { controlActionsMenu, registerControlReplacement } from '@elementor/editor-editing-panel';
-import { backgroundColorOverlayPropTypeUtil, type PropValue, shadowPropTypeUtil } from '@elementor/editor-props';
 
-import {
-	BackgroundRepeaterColorIndicator,
-	BackgroundRepeaterLabel,
-	BoxShadowRepeaterColorIndicator,
-} from './components/variables-repeater-item-slot';
 import { ColorVariableControl } from './controls/color-variable-control';
 import { usePropColorVariableAction } from './hooks/use-prop-color-variable-action';
 import { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';
+import { registerRepeaterInjections } from './repeater-injections';
 import { variableTransformer } from './transformers/variable-transformer';
 import { hasAssignedColorVariable } from './utils';
 
 const { registerPopoverAction } = controlActionsMenu;
 
-const conditions = {
-	backgroundOverlay: ( { value: prop }: { value: PropValue } ) => {
-		return hasAssignedColorVariable( backgroundColorOverlayPropTypeUtil.extract( prop )?.color );
-	},
-
-	boxShadow: ( { value: prop }: { value: PropValue } ) => {
-		return hasAssignedColorVariable( shadowPropTypeUtil.extract( prop )?.color );
-	},
-};
-
-function registerControlsAndActions() {
+export function initColorVariables() {
 	registerControlReplacement( {
 		component: ColorVariableControl,
 		condition: ( { value } ) => hasAssignedColorVariable( value ),
@@ -36,37 +20,8 @@ function registerControlsAndActions() {
 		id: 'color-variables',
 		useProps: usePropColorVariableAction,
 	} );
-}
-
-function registerRepeaterItemIcons() {
-	injectIntoRepeaterItemIcon( {
-		id: 'color-variables-background-icon',
-		component: BackgroundRepeaterColorIndicator,
-		condition: conditions.backgroundOverlay,
-	} );
-
-	injectIntoRepeaterItemIcon( {
-		id: 'color-variables-icon',
-		component: BoxShadowRepeaterColorIndicator,
-		condition: conditions.boxShadow,
-	} );
-}
 
-function registerRepeaterItemLabels() {
-	injectIntoRepeaterItemLabel( {
-		id: 'color-variables-label',
-		component: BackgroundRepeaterLabel,
-		condition: conditions.backgroundOverlay,
-	} );
-}
-
-function registerStyleTransformers() {
 	styleTransformersRegistry.register( colorVariablePropTypeUtil.key, variableTransformer );
-}
 
-export function initColorVariables() {
-	registerControlsAndActions();
-	registerRepeaterItemIcons();
-	registerRepeaterItemLabels();
-	registerStyleTransformers();
+	registerRepeaterInjections();
 }

package/src/repeater-injections.ts

@@ -0,0 +1,35 @@
+import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from '@elementor/editor-controls';
+import { backgroundColorOverlayPropTypeUtil, type PropValue, shadowPropTypeUtil } from '@elementor/editor-props';
+
+import {
+	BackgroundRepeaterColorIndicator,
+	BackgroundRepeaterLabel,
+	BoxShadowRepeaterColorIndicator,
+} from './components/variables-repeater-item-slot';
+import { hasAssignedColorVariable } from './utils';
+
+export function registerRepeaterInjections() {
+	injectIntoRepeaterItemIcon( {
+		id: 'color-variables-background-icon',
+		component: BackgroundRepeaterColorIndicator,
+		condition: ( { value: prop }: { value: PropValue } ) => {
+			return hasAssignedColorVariable( backgroundColorOverlayPropTypeUtil.extract( prop )?.color );
+		},
+	} );
+
+	injectIntoRepeaterItemIcon( {
+		id: 'color-variables-icon',
+		component: BoxShadowRepeaterColorIndicator,
+		condition: ( { value: prop }: { value: PropValue } ) => {
+			return hasAssignedColorVariable( shadowPropTypeUtil.extract( prop )?.color );
+		},
+	} );
+
+	injectIntoRepeaterItemLabel( {
+		id: 'color-variables-label',
+		component: BackgroundRepeaterLabel,
+		condition: ( { value: prop }: { value: PropValue } ) => {
+			return hasAssignedColorVariable( backgroundColorOverlayPropTypeUtil.extract( prop )?.color );
+		},
+	} );
+}

package/src/utils/validations.ts

@@ -0,0 +1,42 @@
+import { __ } from '@wordpress/i18n';
+
+export const VARIABLE_LABEL_MAX_LENGTH = 50;
+
+export const validateLabel = ( name: string ): string => {
+	if ( ! name.trim() ) {
+		return __( 'Missing variable name.', 'elementor' );
+	}
+
+	const allowedChars = /^[a-zA-Z0-9_-]+$/;
+	if ( ! allowedChars.test( name ) ) {
+		return __( 'Names can only use letters, numbers, dashes (-) and underscores (_).', 'elementor' );
+	}
+
+	const hasAlphanumeric = /[a-zA-Z0-9]/;
+	if ( ! hasAlphanumeric.test( name ) ) {
+		return __( 'Names have to include at least one non-special character.', 'elementor' );
+	}
+
+	if ( VARIABLE_LABEL_MAX_LENGTH < name.length ) {
+		return __( 'Variable names can contain up to 50 characters.', 'elementor' );
+	}
+
+	return '';
+};
+
+export const labelHint = ( name: string ): string => {
+	const hintThreshold = VARIABLE_LABEL_MAX_LENGTH * 0.8 - 1;
+	if ( hintThreshold < name.length ) {
+		return __( 'Variable names can contain up to 50 characters.', 'elementor' );
+	}
+
+	return '';
+};
+
+export const validateValue = ( value: string ): string => {
+	if ( ! value.trim() ) {
+		return __( 'Missing variable value.', 'elementor' );
+	}
+
+	return '';
+};