@elementor/editor-variables 0.13.0 → 0.14.0

package/src/components/ui/styled-menu-list.tsx

@@ -0,0 +1,31 @@
+import { MenuList, styled } from '@elementor/ui';
+
+export const VariablesStyledMenuList = styled( MenuList )( ( { theme } ) => ( {
+	'& > li': {
+		height: 32,
+		width: '100%',
+		display: 'flex',
+		alignItems: 'center',
+	},
+	'& > [role="option"]': {
+		...theme.typography.caption,
+		lineHeight: 'inherit',
+		padding: theme.spacing( 0.5, 1, 0.5, 2 ),
+		'&:hover, &:focus': {
+			backgroundColor: theme.palette.action.hover,
+		},
+		'&[aria-selected="true"]': {
+			backgroundColor: theme.palette.action.selected,
+		},
+		cursor: 'pointer',
+		textOverflow: 'ellipsis',
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		'&:hover .MuiIconButton-root, .MuiIconButton-root:focus': {
+			opacity: 1,
+		},
+	},
+	width: '100%',
+	position: 'relative',
+} ) );

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

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { useRef, useState } from 'react';
+
+import { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';
+import { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';
+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';
+
+const VIEW_LIST = 'list';
+const VIEW_ADD = 'add';
+const VIEW_EDIT = 'edit';
+
+type View = typeof VIEW_LIST | typeof VIEW_ADD | typeof VIEW_EDIT;
+
+type Props = {
+	closePopover: () => void;
+	propTypeKey: string;
+	selectedVariable?: Variable;
+};
+
+export const VariableSelectionPopover = ( { closePopover, propTypeKey, selectedVariable }: Props ) => {
+	const [ currentView, setCurrentView ] = useState< View >( VIEW_LIST );
+	const editIdRef = useRef< string >( '' );
+
+	return renderStage( {
+		propTypeKey,
+		currentView,
+		selectedVariable,
+		editIdRef,
+		setCurrentView,
+		closePopover,
+	} );
+};
+
+type StageProps = {
+	propTypeKey: string;
+	currentView: View;
+	selectedVariable?: Variable;
+	editIdRef: React.MutableRefObject< string >;
+	setCurrentView: ( stage: View ) => void;
+	closePopover: () => void;
+};
+
+function renderStage( props: StageProps ): React.ReactNode {
+	const handleSubmitOnEdit = () => {
+		if ( props?.selectedVariable?.key === props.editIdRef.current ) {
+			props.closePopover();
+		} else {
+			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 ( VIEW_ADD === props.currentView ) {
+			return (
+				<FontVariableCreation
+					onGoBack={ () => props.setCurrentView( VIEW_LIST ) }
+					onClose={ props.closePopover }
+				/>
+			);
+		}
+
+		if ( VIEW_EDIT === props.currentView ) {
+			return (
+				<FontVariableEdit
+					editId={ props.editIdRef.current ?? '' }
+					onGoBack={ () => props.setCurrentView( VIEW_LIST ) }
+					onClose={ props.closePopover }
+					onSubmit={ handleSubmitOnEdit }
+				/>
+			);
+		}
+	}
+
+	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 );
+					} }
+				/>
+			);
+		}
+
+		if ( VIEW_ADD === props.currentView ) {
+			return (
+				<ColorVariableCreation
+					onGoBack={ () => props.setCurrentView( VIEW_LIST ) }
+					onClose={ props.closePopover }
+				/>
+			);
+		}
+
+		if ( VIEW_EDIT === props.currentView ) {
+			return (
+				<ColorVariableEdit
+					editId={ props.editIdRef.current ?? '' }
+					onGoBack={ () => props.setCurrentView( VIEW_LIST ) }
+					onClose={ props.closePopover }
+					onSubmit={ handleSubmitOnEdit }
+				/>
+			);
+		}
+	}
+
+	return null;
+}

package/src/components/variables-repeater-item-slot.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { type BackgroundColorOverlayPropValue, type BoxShadowPropValue, type PropValue } from '@elementor/editor-props';
+
+import { useVariable } from '../hooks/use-prop-variables';
+import { ColorIndicator } from './ui/color-indicator';
+
+const useColorVariable = ( value: BackgroundColorOverlayPropValue | BoxShadowPropValue ) => {
+	const variableId = value?.value?.color?.value;
+
+	return useVariable( variableId || '' );
+};
+
+export const BackgroundRepeaterColorIndicator = ( { value }: { value: PropValue } ) => {
+	const colorVariable = useColorVariable( value as BackgroundColorOverlayPropValue );
+
+	return <ColorIndicator component="span" size="inherit" value={ colorVariable?.value } />;
+};
+
+export const BackgroundRepeaterLabel = ( { value }: { value: PropValue } ) => {
+	const colorVariable = useColorVariable( value as BackgroundColorOverlayPropValue );
+
+	return <span>{ colorVariable?.label }</span>;
+};
+
+export const BoxShadowRepeaterColorIndicator = ( { value }: { value: PropValue } ) => {
+	const colorVariable = useColorVariable( value as BoxShadowPropValue );
+
+	return <ColorIndicator component="span" size="inherit" value={ colorVariable?.value } />;
+};

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

@@ -0,0 +1,90 @@
+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 { 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 anchorRef = useRef< HTMLDivElement >( null );
+
+	const popupId = useId();
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: `elementor-variables-list-${ popupId }`,
+	} );
+
+	const selectedVariable = useVariable( variableValue );
+	if ( ! selectedVariable ) {
+		throw new Error( `Global color variable ${ variableValue } not found` );
+	}
+
+	const unlinkVariable = () => {
+		setColor( colorPropTypeUtil.create( selectedVariable.value ) );
+	};
+
+	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>
+	);
+};

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

@@ -0,0 +1,88 @@
+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 { 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 anchorRef = useRef< HTMLDivElement >( null );
+
+	const popupId = useId();
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: `elementor-variables-list-${ popupId }`,
+	} );
+
+	const selectedVariable = useVariable( variableValue );
+	if ( ! selectedVariable ) {
+		throw new Error( `Global font variable ${ variableValue } not found` );
+	}
+
+	const unlinkVariable = () => {
+		setFontFamily( stringPropTypeUtil.create( selectedVariable.value ) );
+	};
+
+	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>
+	);
+};

package/src/create-style-variables-repository.ts

@@ -1,6 +1,7 @@
-import { type StyleVariables, type Variables, type VariableValue } from './types';
+import { type StyleVariables, type Variable } from './types';
 
 type VariablesChangeCallback = ( variables: StyleVariables ) => void;
+type Variables = Record< string, Variable >;
 
 export const createStyleVariablesRepository = () => {
 	const variables: StyleVariables = {};
@@ -20,7 +21,7 @@ export const createStyleVariablesRepository = () => {
 		}
 	};
 
-	const shouldUpdate = ( key: string, newValue: VariableValue ): boolean => {
+	const shouldUpdate = ( key: string, newValue: string ): boolean => {
 		return ! ( key in variables ) || variables[ key ] !== newValue;
 	};
 

package/src/hooks/use-prop-color-variable-action.tsx

@@ -3,7 +3,8 @@ import { type PopoverActionProps, useBoundProp } from '@elementor/editor-editing
 import { ColorFilterIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
 
-import { ColorVariablesSelection } from '../components/color-variables-selection';
+import { VariableSelectionPopover } from '../components/variable-selection-popover';
+import { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';
 import { supportsColorVariables } from '../utils';
 
 export const usePropColorVariableAction = (): PopoverActionProps => {
@@ -15,6 +16,10 @@ export const usePropColorVariableAction = (): PopoverActionProps => {
 		visible,
 		icon: ColorFilterIcon,
 		title: __( 'Variables', 'elementor' ),
-		popoverContent: ( { closePopover } ) => <ColorVariablesSelection onSelect={ closePopover } />,
+		content: ( { close: closePopover } ) => {
+			return (
+				<VariableSelectionPopover closePopover={ closePopover } propTypeKey={ colorVariablePropTypeUtil.key } />
+			);
+		},
 	};
 };

package/src/hooks/use-prop-font-variable-action.tsx

@@ -3,7 +3,8 @@ import { type PopoverActionProps, useBoundProp } from '@elementor/editor-editing
 import { ColorFilterIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
 
-import { FontVariablesSelection } from '../components/font-variables-selection';
+import { VariableSelectionPopover } from '../components/variable-selection-popover';
+import { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';
 import { supportsFontVariables } from '../utils';
 
 export const usePropFontVariableAction = (): PopoverActionProps => {
@@ -15,6 +16,10 @@ export const usePropFontVariableAction = (): PopoverActionProps => {
 		visible,
 		icon: ColorFilterIcon,
 		title: __( 'Variables', 'elementor' ),
-		popoverContent: ( { closePopover } ) => <FontVariablesSelection onSelect={ closePopover } />,
+		content: ( { close: closePopover } ) => {
+			return (
+				<VariableSelectionPopover closePopover={ closePopover } propTypeKey={ fontVariablePropTypeUtil.key } />
+			);
+		},
 	};
 };

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

@@ -6,10 +6,6 @@ import { type TVariable } from '../storage';
 import { styleVariablesRepository } from '../style-variables-repository';
 import { type Variable } from '../types';
 
-export const usePropVariables = ( propKey: PropKey ) => {
-	return useMemo( () => normalizeVariables( propKey ), [ propKey ] );
-};
-
 export const useVariable = ( key: string ) => {
 	const variables = service.variables();
 
@@ -23,6 +19,24 @@ export const useVariable = ( key: string ) => {
 	};
 };
 
+export const useFilteredVariables = ( searchValue: string, propTypeKey: string ) => {
+	const variables = usePropVariables( propTypeKey );
+
+	const filteredVariables = variables.filter( ( { label } ) => {
+		return label.toLowerCase().includes( searchValue.toLowerCase() );
+	} );
+
+	return {
+		list: filteredVariables,
+		hasMatches: filteredVariables.length > 0,
+		isSourceNotEmpty: variables.length > 0,
+	};
+};
+
+const usePropVariables = ( propKey: PropKey ) => {
+	return useMemo( () => normalizeVariables( propKey ), [ propKey ] );
+};
+
 const normalizeVariables = ( propKey: string ) => {
 	const variables = service.variables();
 
@@ -42,6 +56,19 @@ export const createVariable = ( newVariable: Variable ): Promise< string > => {
 		styleVariablesRepository.update( {
 			[ id ]: variable,
 		} );
+
 		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 id;
+		} );
+};

package/src/init-color-variables.ts

@@ -1,7 +1,14 @@
 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 { ColorVariablesSelectionControl } from './controls/color-variables-selection-control';
+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 { variableTransformer } from './transformers/variable-transformer';
@@ -9,9 +16,19 @@ import { hasAssignedColorVariable } from './utils';
 
 const { registerPopoverAction } = controlActionsMenu;
 
-export function initColorVariables() {
+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() {
 	registerControlReplacement( {
-		component: ColorVariablesSelectionControl,
+		component: ColorVariableControl,
 		condition: ( { value } ) => hasAssignedColorVariable( value ),
 	} );
 
@@ -19,6 +36,37 @@ export function initColorVariables() {
 		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();
+}

package/src/init-font-variables.ts

@@ -1,7 +1,7 @@
 import { styleTransformersRegistry } from '@elementor/editor-canvas';
 import { controlActionsMenu, registerControlReplacement } from '@elementor/editor-editing-panel';
 
-import { FontVariablesSelectionControl } from './controls/font-variables-selection-control';
+import { FontVariableControl } from './controls/font-variable-control';
 import { usePropFontVariableAction } from './hooks/use-prop-font-variable-action';
 import { fontVariablePropTypeUtil } from './prop-types/font-variable-prop-type';
 import { variableTransformer } from './transformers/variable-transformer';
@@ -11,7 +11,7 @@ const { registerPopoverAction } = controlActionsMenu;
 
 export function initFontVariables() {
 	registerControlReplacement( {
-		component: FontVariablesSelectionControl,
+		component: FontVariableControl,
 		condition: ( { value } ) => hasAssignedFontVariable( value ),
 	} );
 

package/src/service.ts

@@ -1,5 +1,7 @@
 import { apiClient } from './api';
-import { OP_RW, Storage, type TVariable, type TVariablesList } from './storage';
+import { OP_RW, Storage, type TVariablesList } from './storage';
+import { styleVariablesRepository } from './style-variables-repository';
+import { type Variable } from './types';
 
 const storage = new Storage();
 
@@ -29,11 +31,13 @@ export const service = {
 
 				storage.fill( variables, watermark );
 
+				styleVariablesRepository.update( variables );
+
 				return variables;
 			} );
 	},
 
-	create: ( { type, label, value }: TVariable ) => {
+	create: ( { type, label, value }: Variable ) => {
 		return apiClient
 			.create( type, label, value )
 			.then( ( response ) => {
@@ -54,6 +58,10 @@ export const service = {
 
 				storage.add( variableId, createdVariable );
 
+				styleVariablesRepository.update( {
+					[ variableId ]: createdVariable,
+				} );
+
 				return {
 					id: variableId,
 					variable: createdVariable,
@@ -61,7 +69,7 @@ export const service = {
 			} );
 	},
 
-	update: ( id: string, { label, value }: TVariable ) => {
+	update: ( id: string, { label, value }: Omit< Variable, 'type' > ) => {
 		return apiClient
 			.update( id, label, value )
 			.then( ( response ) => {
@@ -82,6 +90,10 @@ export const service = {
 
 				storage.update( variableId, updatedVariable );
 
+				styleVariablesRepository.update( {
+					[ variableId ]: updatedVariable,
+				} );
+
 				return {
 					id: variableId,
 					variable: updatedVariable,
@@ -110,6 +122,10 @@ export const service = {
 
 				storage.update( variableId, deletedVariable );
 
+				styleVariablesRepository.update( {
+					[ variableId ]: deletedVariable,
+				} );
+
 				return {
 					id: variableId,
 					variable: deletedVariable,
@@ -138,6 +154,10 @@ export const service = {
 
 				storage.update( variableId, restoredVariable );
 
+				styleVariablesRepository.update( {
+					[ variableId ]: restoredVariable,
+				} );
+
 				return {
 					id: variableId,
 					variable: restoredVariable,

package/src/storage.ts

@@ -34,8 +34,12 @@ export class Storage {
 	}
 
 	fill( variables: TVariablesList, watermark: number ) {
+		this.state.variables = {};
+		if ( variables && Object.keys( variables ).length ) {
+			this.state.variables = variables;
+		}
+
 		this.state.watermark = watermark;
-		this.state.variables = variables;
 
 		localStorage.setItem( STORAGE_WATERMARK_KEY, this.state.watermark.toString() );
 		localStorage.setItem( STORAGE_KEY, JSON.stringify( this.state.variables ) );