@elementor/editor-variables 0.14.0 → 0.15.0

package/src/components/ui/variable-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 VariableTag = ( { 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/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

@@ -2,27 +2,15 @@ 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 { ColorFilterIcon } from '@elementor/icons';
+import { bindPopover, bindTrigger, Box, Popover, usePopupState } from '@elementor/ui';
 
 import { ColorIndicator } from '../components/ui/color-indicator';
+import { SIZE, VariableTag } from '../components/ui/variable-tag';
 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 );
@@ -46,30 +34,15 @@ export const ColorVariableControl = () => {
 
 	return (
 		<Box ref={ anchorRef }>
-			<Tag
-				fullWidth
-				showActionsOnHover
+			<VariableTag
+				label={ selectedVariable.label }
 				startIcon={
-					<Stack spacing={ 0.75 } direction="row" alignItems="center">
+					<>
+						<ColorFilterIcon fontSize={ SIZE } />
 						<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>
+					</>
 				}
+				onUnlink={ unlinkVariable }
 				{ ...bindTrigger( popupState ) }
 			/>
 			<Popover
@@ -77,6 +50,9 @@ export const ColorVariableControl = () => {
 				anchorEl={ anchorRef.current }
 				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
 				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
+				PaperProps={ {
+					sx: { my: 1 },
+				} }
 				{ ...bindPopover( popupState ) }
 			>
 				<VariableSelectionPopover

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

@@ -2,26 +2,14 @@ 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 { ColorFilterIcon } from '@elementor/icons';
+import { bindPopover, bindTrigger, Box, Popover, usePopupState } from '@elementor/ui';
 
+import { SIZE, VariableTag } from '../components/ui/variable-tag';
 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 );
@@ -45,29 +33,10 @@ export const FontVariableControl = () => {
 
 	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>
-				}
+			<VariableTag
+				label={ selectedVariable.label }
+				startIcon={ <ColorFilterIcon fontSize={ SIZE } /> }
+				onUnlink={ unlinkVariable }
 				{ ...bindTrigger( popupState ) }
 			/>
 			<Popover
@@ -75,6 +44,9 @@ export const FontVariableControl = () => {
 				anchorEl={ anchorRef.current }
 				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
 				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
+				PaperProps={ {
+					sx: { my: 1 },
+				} }
 				{ ...bindPopover( popupState ) }
 			>
 				<VariableSelectionPopover

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;
+	} );
 };