@elementor/editor-variables 0.13.0 → 0.15.0

package/src/components/font-variables-selection.tsx

@@ -1,70 +1,129 @@
 import * as React from 'react';
-import { Fragment } from 'react';
+import { useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
-import { EditIcon, TextIcon } from '@elementor/icons';
-import { Box, Divider, ListItemIcon, ListItemText, MenuList } from '@elementor/ui';
+import { PopoverScrollableContent } from '@elementor/editor-editing-panel';
+import { PopoverHeader, PopoverMenuList, PopoverSearch, type VirtualizedItem } from '@elementor/editor-ui';
+import { ColorFilterIcon, PlusIcon, SettingsIcon, TextIcon } from '@elementor/icons';
+import { Divider, IconButton } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
 
-import { usePropVariables } from '../hooks/use-prop-variables';
+import { useFilteredVariables } from '../hooks/use-prop-variables';
 import { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';
-import { type VariableKey } from '../types';
-import { StyledMenuItem } from './styled-menu-item';
+import { type ExtendedVirtualizedItem } from '../types';
+import { MenuItemContent } from './ui/menu-item-content';
+import { NoSearchResults } from './ui/no-search-results';
+import { NoVariables } from './ui/no-variables';
+import { VariablesStyledMenuList } from './ui/styled-menu-list';
+
+const SIZE = 'tiny';
 
 type Props = {
-	onSelect?: () => void;
+	closePopover: () => void;
+	onAdd?: () => void;
+	onEdit?: ( key: string ) => void;
+	onSettings?: () => void;
 };
 
-export const FontVariablesSelection = ( { onSelect }: Props ) => {
+export const FontVariablesSelection = ( { closePopover, onAdd, onEdit, onSettings }: Props ) => {
 	const { value: variable, setValue: setVariable } = useBoundProp( fontVariablePropTypeUtil );
+	const [ searchValue, setSearchValue ] = useState( '' );
 
-	const variables = usePropVariables( fontVariablePropTypeUtil.key );
+	const {
+		list: variables,
+		hasMatches: hasSearchResults,
+		isSourceNotEmpty: hasVariables,
+	} = useFilteredVariables( searchValue, fontVariablePropTypeUtil.key );
 
-	const handleSetVariable = ( key: VariableKey ) => {
+	const handleSetVariable = ( key: string ) => {
 		setVariable( key );
+		closePopover();
+	};
+
+	const actions = [];
+
+	if ( onAdd ) {
+		actions.push(
+			<IconButton key="add" size={ SIZE } onClick={ onAdd }>
+				<PlusIcon fontSize={ SIZE } />
+			</IconButton>
+		);
+	}
 
-		onSelect?.();
+	if ( onSettings ) {
+		actions.push(
+			<IconButton key="settings" size={ SIZE } onClick={ onSettings }>
+				<SettingsIcon fontSize={ SIZE } />
+			</IconButton>
+		);
+	}
+
+	const items: ExtendedVirtualizedItem[] = variables.map( ( { value, label, key } ) => ( {
+		type: 'item' as const,
+		value: key,
+		label,
+		icon: <TextIcon fontSize={ SIZE } />,
+		secondaryText: value,
+		onEdit: () => onEdit?.( key ),
+	} ) );
+
+	const handleSearch = ( search: string ) => {
+		setSearchValue( search );
+	};
+
+	const handleClearSearch = () => {
+		setSearchValue( '' );
 	};
 
 	return (
-		<Fragment>
+		<>
+			<PopoverHeader
+				title={ __( 'Variables', 'elementor' ) }
+				onClose={ closePopover }
+				icon={ <ColorFilterIcon fontSize={ SIZE } /> }
+				actions={ actions }
+			/>
+
+			{ hasVariables && (
+				<PopoverSearch
+					value={ searchValue }
+					onSearch={ handleSearch }
+					placeholder={ __( 'Search', 'elementor' ) }
+				/>
+			) }
+
 			<Divider />
-			<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>
-				<MenuList role="listbox" tabIndex={ 0 }>
-					{ variables.map( ( { value, label, key } ) => (
-						<StyledMenuItem
-							key={ key }
-							onClick={ () => handleSetVariable( key ) }
-							selected={ key === variable }
-						>
-							<ListItemIcon>
-								<TextIcon />
-							</ListItemIcon>
-							<ListItemText
-								primary={ label }
-								secondary={ value }
-								primaryTypographyProps={ {
-									variant: 'body2',
-									color: 'text.secondary',
-									style: {
-										lineHeight: 2,
-										display: 'inline-block',
-										overflow: 'hidden',
-										textOverflow: 'ellipsis',
-										whiteSpace: 'nowrap',
-										maxWidth: '81px',
-									},
-								} }
-								secondaryTypographyProps={ {
-									variant: 'caption',
-									color: 'text.tertiary',
-									style: { marginTop: '1px', lineHeight: '1' },
-								} }
-								sx={ { display: 'flex', alignItems: 'center', gap: 1 } }
-							/>
-							<EditIcon color="action" fontSize="inherit" sx={ { mx: 1, opacity: '0' } } />
-						</StyledMenuItem>
-					) ) }
-				</MenuList>
-			</Box>
-		</Fragment>
+
+			<PopoverScrollableContent>
+				{ hasVariables && hasSearchResults && (
+					<PopoverMenuList
+						items={ items }
+						onSelect={ handleSetVariable }
+						onClose={ () => {} }
+						selectedValue={ variable }
+						data-testid="font-variables-list"
+						menuListTemplate={ VariablesStyledMenuList }
+						menuItemContentTemplate={ ( item: VirtualizedItem< 'item', string > ) => (
+							<MenuItemContent item={ item } />
+						) }
+					/>
+				) }
+
+				{ ! hasSearchResults && hasVariables && (
+					<NoSearchResults
+						searchValue={ searchValue }
+						onClear={ handleClearSearch }
+						icon={ <TextIcon fontSize="large" /> }
+					/>
+				) }
+
+				{ ! hasVariables && (
+					<NoVariables
+						title={ __( 'Create your first font variable', 'elementor' ) }
+						icon={ <TextIcon fontSize="large" /> }
+						onAdd={ onAdd }
+					/>
+				) }
+			</PopoverScrollableContent>
+		</>
 	);
 };

package/src/components/{color-indicator.tsx → ui/color-indicator.tsx}

@@ -2,4 +2,5 @@ import { styled, UnstableColorIndicator } from '@elementor/ui';
 
 export const ColorIndicator = styled( UnstableColorIndicator )( ( { theme } ) => ( {
 	borderRadius: `${ theme.shape.borderRadius / 2 }px`,
+	marginRight: theme.spacing( 0.25 ),
 } ) );

package/src/components/ui/menu-item-content.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { EllipsisWithTooltip, type VirtualizedItem } from '@elementor/editor-ui';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
+import { EditIcon } from '@elementor/icons';
+import { Box, IconButton, ListItemIcon, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+const SIZE = 'tiny';
+
+const isVersion330Active = isExperimentActive( 'e_v_3_30' );
+
+export const MenuItemContent = < T, V extends string >( { item }: { item: VirtualizedItem< T, V > } ) => {
+	const onEdit = item.onEdit as ( ( value: V ) => void ) | undefined;
+
+	return (
+		<>
+			<ListItemIcon>{ item.icon }</ListItemIcon>
+			<Box
+				sx={ {
+					flex: 1,
+					minWidth: 0,
+					display: 'flex',
+					alignItems: 'center',
+					gap: 1,
+				} }
+			>
+				<EllipsisWithTooltip
+					title={ item.label || item.value }
+					as={ Typography }
+					variant={ isVersion330Active ? 'caption' : 'body2' }
+					color={ isVersion330Active ? 'text.primary' : 'text.secondary' }
+					sx={ { marginTop: '1px', lineHeight: '2' } }
+					maxWidth="50%"
+				/>
+				{ item.secondaryText && (
+					<EllipsisWithTooltip
+						title={ item.secondaryText }
+						as={ Typography }
+						variant="caption"
+						color="text.tertiary"
+						sx={ { marginTop: '1px', lineHeight: '1' } }
+						maxWidth="50%"
+					/>
+				) }
+			</Box>
+			{ !! onEdit && (
+				<IconButton
+					sx={ { mx: 1, opacity: '0' } }
+					onClick={ ( e: React.MouseEvent< HTMLButtonElement > ) => {
+						e.stopPropagation();
+						onEdit( item.value );
+					} }
+					aria-label={ __( 'Edit', 'elementor' ) }
+				>
+					<EditIcon color="action" fontSize={ SIZE } />
+				</IconButton>
+			) }
+		</>
+	);
+};

package/src/components/ui/no-search-results.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Link, Stack, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+type Props = {
+	searchValue: string;
+	onClear?: () => void;
+	icon?: React.ReactNode;
+};
+
+export const NoSearchResults = ( { searchValue, onClear, icon }: Props ) => {
+	return (
+		<Stack
+			gap={ 1 }
+			alignItems="center"
+			justifyContent="center"
+			height="100%"
+			p={ 2.5 }
+			color="text.secondary"
+			sx={ { pb: 3.5 } }
+		>
+			{ icon }
+			<Typography align="center" variant="subtitle2">
+				{ __( 'Sorry, nothing matched', 'elementor' ) }
+				<br />
+				&ldquo;{ searchValue }&rdquo;.
+			</Typography>
+			<Typography align="center" variant="caption" sx={ { display: 'flex', flexDirection: 'column' } }>
+				{ __( 'Try something else.', 'elementor' ) }
+				<Link color="text.secondary" variant="caption" component="button" onClick={ onClear }>
+					{ __( 'Clear & try again', 'elementor' ) }
+				</Link>
+			</Typography>
+		</Stack>
+	);
+};

package/src/components/ui/no-variables.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Button, Stack, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+type Props = {
+	icon?: React.ReactNode;
+	title?: string;
+	onAdd?: () => void;
+};
+
+export const NoVariables = ( { icon, title, onAdd }: Props ) => (
+	<Stack
+		gap={ 1 }
+		alignItems="center"
+		justifyContent="center"
+		height="100%"
+		color="text.secondary"
+		sx={ { p: 2.5, pb: 5.5 } }
+	>
+		{ icon }
+
+		<Typography align="center" variant="subtitle2">
+			{ title }
+		</Typography>
+
+		<Typography align="center" variant="caption" maxWidth="180px">
+			{ __( 'Variables are saved attributes that you can apply anywhere on your site.', 'elementor' ) }
+		</Typography>
+
+		{ onAdd && (
+			<Button variant="outlined" color="secondary" size="small" onClick={ onAdd }>
+				{ __( 'Create a variable', 'elementor' ) }
+			</Button>
+		) }
+	</Stack>
+);

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/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

@@ -0,0 +1,142 @@
+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';
+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';
+
+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 >( '' );
+	const anchorRef = useRef< HTMLDivElement >( null );
+
+	return (
+		<PopoverContentRefContext.Provider value={ anchorRef }>
+			<Box ref={ anchorRef }>
+				{ renderStage( {
+					propTypeKey,
+					currentView,
+					selectedVariable,
+					editIdRef,
+					setCurrentView,
+					closePopover,
+				} ) }
+			</Box>
+		</PopoverContentRefContext.Provider>
+	);
+};
+
+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,66 @@
+import * as React from 'react';
+import { useId, useRef } from 'react';
+import { useBoundProp } from '@elementor/editor-controls';
+import { colorPropTypeUtil } from '@elementor/editor-props';
+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';
+
+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 }>
+			<VariableTag
+				label={ selectedVariable.label }
+				startIcon={
+					<>
+						<ColorFilterIcon fontSize={ SIZE } />
+						<ColorIndicator size="inherit" value={ selectedVariable.value } component="span" />
+					</>
+				}
+				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={ selectedVariable }
+					closePopover={ popupState.close }
+					propTypeKey={ colorVariablePropTypeUtil.key }
+				/>
+			</Popover>
+		</Box>
+	);
+};