@elementor/editor-variables 0.13.0 → 0.15.0

package/src/components/color-variable-edit.tsx

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { useRef, useState } from 'react';
+import { PopoverContent } from '@elementor/editor-controls';
+import { PopoverHeader, PopoverScrollableContent } from '@elementor/editor-ui';
+import { ArrowLeftIcon, BrushIcon, TrashIcon } from '@elementor/icons';
+import {
+	Button,
+	CardActions,
+	Divider,
+	FormLabel,
+	Grid,
+	IconButton,
+	TextField,
+	UnstableColorField,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { deleteVariable, updateVariable, useVariable } from '../hooks/use-prop-variables';
+import { usePopoverContentRef } from './variable-selection-popover.context';
+
+const SIZE = 'tiny';
+
+type Props = {
+	editId: string;
+	onClose: () => void;
+	onGoBack?: () => void;
+	onSubmit?: () => void;
+};
+
+export const ColorVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props ) => {
+	const variable = useVariable( editId );
+	if ( ! variable ) {
+		throw new Error( `Global color variable not found` );
+	}
+
+	const defaultRef = useRef< HTMLDivElement >( null );
+	const anchorRef = usePopoverContentRef() ?? defaultRef;
+
+	const [ color, setColor ] = useState( variable.value );
+	const [ label, setLabel ] = useState( variable.label );
+
+	const handleUpdate = () => {
+		updateVariable( editId, {
+			value: color,
+			label,
+		} ).then( () => {
+			onSubmit?.();
+		} );
+	};
+
+	const handleDelete = () => {
+		deleteVariable( editId ).then( () => {
+			onSubmit?.();
+		} );
+	};
+
+	const noValueChanged = () => color === variable.value && label === variable.label;
+	const hasEmptyValue = () => '' === color.trim() || '' === label.trim();
+	const isSaveDisabled = () => noValueChanged() || hasEmptyValue();
+
+	const actions = [];
+
+	actions.push(
+		<IconButton key="delete" size={ SIZE } aria-label={ __( 'Delete', 'elementor' ) } onClick={ handleDelete }>
+			<TrashIcon fontSize={ SIZE } />
+		</IconButton>
+	);
+
+	return (
+		<PopoverScrollableContent height="auto">
+			<PopoverHeader
+				title={ __( 'Edit variable', 'elementor' ) }
+				onClose={ onClose }
+				icon={
+					<>
+						{ onGoBack && (
+							<IconButton size={ SIZE } aria-label={ __( 'Go Back', 'elementor' ) } onClick={ onGoBack }>
+								<ArrowLeftIcon fontSize={ SIZE } />
+							</IconButton>
+						) }
+						<BrushIcon fontSize={ SIZE } />
+					</>
+				}
+				actions={ actions }
+			/>
+
+			<Divider />
+
+			<PopoverContent p={ 2 }>
+				<Grid container gap={ 0.75 } alignItems="center">
+					<Grid item xs={ 12 }>
+						<FormLabel size="tiny">{ __( 'Name', 'elementor' ) }</FormLabel>
+					</Grid>
+					<Grid item xs={ 12 }>
+						<TextField
+							size="tiny"
+							fullWidth
+							value={ label }
+							onChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => setLabel( e.target.value ) }
+						/>
+					</Grid>
+				</Grid>
+
+				<Grid container gap={ 0.75 } alignItems="center">
+					<Grid item xs={ 12 }>
+						<FormLabel size="tiny">{ __( 'Value', 'elementor' ) }</FormLabel>
+					</Grid>
+					<Grid item xs={ 12 }>
+						<UnstableColorField
+							size="tiny"
+							fullWidth
+							value={ color }
+							onChange={ setColor }
+							slotProps={ {
+								colorPicker: {
+									anchorEl: anchorRef.current,
+									anchorOrigin: { vertical: 'top', horizontal: 'right' },
+									transformOrigin: { vertical: 'top', horizontal: -10 },
+								},
+							} }
+						/>
+					</Grid>
+				</Grid>
+			</PopoverContent>
+
+			<CardActions sx={ { pt: 0.5, pb: 1 } }>
+				<Button size="small" variant="contained" disabled={ isSaveDisabled() } onClick={ handleUpdate }>
+					{ __( 'Save', 'elementor' ) }
+				</Button>
+			</CardActions>
+		</PopoverScrollableContent>
+	);
+};

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

@@ -1,71 +1,130 @@
 import * as React from 'react';
-import { Fragment } from 'react';
+import { useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
-import { EditIcon } 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 { BrushIcon, ColorFilterIcon, PlusIcon, SettingsIcon } 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 { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';
-import { type VariableKey } from '../types';
-import { ColorIndicator } from './color-indicator';
-import { StyledMenuItem } from './styled-menu-item';
+import { type ExtendedVirtualizedItem } from '../types';
+import { ColorIndicator } from './ui/color-indicator';
+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 ColorVariablesSelection = ( { onSelect }: Props ) => {
+export const ColorVariablesSelection = ( { closePopover, onAdd, onEdit, onSettings }: Props ) => {
 	const { value: variable, setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );
+	const [ searchValue, setSearchValue ] = useState( '' );
 
-	const variables = usePropVariables( colorVariablePropTypeUtil.key );
+	const {
+		list: variables,
+		hasMatches: hasSearchResults,
+		isSourceNotEmpty: hasVariables,
+	} = useFilteredVariables( searchValue, colorVariablePropTypeUtil.key );
 
-	const handleSetColorVariable = ( key: VariableKey ) => {
+	const handleSetColorVariable = ( 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: <ColorIndicator size="inherit" component="span" value={ value } />,
+		secondaryText: value,
+		onEdit: () => onEdit?.( key ),
+	} ) );
+
+	const handleSearch = ( search: string ) => {
+		setSearchValue( search );
+	};
+
+	const handleClearSearch = () => {
+		setSearchValue( '' );
 	};
 
 	return (
-		<Fragment>
+		<>
+			<PopoverHeader
+				title={ __( 'Variables', 'elementor' ) }
+				icon={ <ColorFilterIcon fontSize={ SIZE } /> }
+				onClose={ closePopover }
+				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={ () => handleSetColorVariable( key ) }
-							selected={ key === variable }
-						>
-							<ListItemIcon>
-								<ColorIndicator size="inherit" component="span" value={ value } />
-							</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={ handleSetColorVariable }
+						onClose={ () => {} }
+						selectedValue={ variable }
+						data-testid="color-variables-list"
+						menuListTemplate={ VariablesStyledMenuList }
+						menuItemContentTemplate={ ( item: VirtualizedItem< 'item', string > ) => (
+							<MenuItemContent item={ item } />
+						) }
+					/>
+				) }
+
+				{ ! hasSearchResults && hasVariables && (
+					<NoSearchResults
+						searchValue={ searchValue }
+						onClear={ handleClearSearch }
+						icon={ <BrushIcon fontSize="large" /> }
+					/>
+				) }
+
+				{ ! hasVariables && (
+					<NoVariables
+						title={ __( 'Create your first color variable', 'elementor' ) }
+						icon={ <BrushIcon fontSize="large" /> }
+						onAdd={ onAdd }
+					/>
+				) }
+			</PopoverScrollableContent>
+		</>
 	);
 };

package/src/components/font-variable-creation.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useRef, useState } from 'react';
-import { FontFamilySelector, useBoundProp } from '@elementor/editor-controls';
-import { useFontFamilies } from '@elementor/editor-editing-panel';
+import { FontFamilySelector, PopoverContent, useBoundProp } from '@elementor/editor-controls';
+import { PopoverScrollableContent, useFontFamilies, useSectionWidth } from '@elementor/editor-editing-panel';
 import { PopoverHeader } from '@elementor/editor-ui';
-import { ChevronDownIcon, TextIcon } from '@elementor/icons';
+import { ArrowLeftIcon, ChevronDownIcon, TextIcon } from '@elementor/icons';
 import {
 	bindPopover,
 	bindTrigger,
@@ -12,8 +12,8 @@ import {
 	Divider,
 	FormLabel,
 	Grid,
+	IconButton,
 	Popover,
-	Stack,
 	TextField,
 	UnstableTag,
 	usePopupState,
@@ -25,7 +25,12 @@ import { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type'
 
 const SIZE = 'tiny';
 
-export const FontVariableCreation = ( { onClose }: { onClose: () => void } ) => {
+type Props = {
+	onGoBack?: () => void;
+	onClose: () => void;
+};
+
+export const FontVariableCreation = ( { onClose, onGoBack }: Props ) => {
 	const fontFamilies = useFontFamilies();
 	const { setValue: setVariable } = useBoundProp( fontVariablePropTypeUtil );
 
@@ -60,20 +65,31 @@ export const FontVariableCreation = ( { onClose }: { onClose: () => void } ) =>
 		return ! fontFamily?.trim() || ! label?.trim();
 	};
 
+	const sectionWidth = useSectionWidth();
+
 	return (
-		<>
+		<PopoverScrollableContent height="auto">
 			<PopoverHeader
+				icon={
+					<>
+						{ onGoBack && (
+							<IconButton size={ SIZE } aria-label={ __( 'Go Back', 'elementor' ) } onClick={ onGoBack }>
+								<ArrowLeftIcon fontSize={ SIZE } />
+							</IconButton>
+						) }
+						<TextIcon fontSize={ SIZE } />
+					</>
+				}
 				title={ __( 'Create variable', 'elementor' ) }
 				onClose={ closePopover }
-				icon={ <TextIcon fontSize={ SIZE } /> }
 			/>
 
 			<Divider />
 
-			<Stack p={ 1.5 } gap={ 1.5 }>
+			<PopoverContent p={ 2 }>
 				<Grid container gap={ 0.75 } alignItems="center">
 					<Grid item xs={ 12 }>
-						<FormLabel size="small">{ __( 'Name', 'elementor' ) }</FormLabel>
+						<FormLabel size="tiny">{ __( 'Name', 'elementor' ) }</FormLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
 						<TextField
@@ -87,7 +103,7 @@ export const FontVariableCreation = ( { onClose }: { onClose: () => void } ) =>
 
 				<Grid container gap={ 0.75 } alignItems="center">
 					<Grid item xs={ 12 }>
-						<FormLabel size="small">{ __( 'Value', 'elementor' ) }</FormLabel>
+						<FormLabel size="tiny">{ __( 'Value', 'elementor' ) }</FormLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
 						<>
@@ -111,21 +127,19 @@ export const FontVariableCreation = ( { onClose }: { onClose: () => void } ) =>
 									fontFamily={ fontFamily }
 									onFontFamilyChange={ setFontFamily }
 									onClose={ fontPopoverState.close }
+									sectionWidth={ sectionWidth }
 								/>
 							</Popover>
 						</>
 					</Grid>
 				</Grid>
-			</Stack>
+			</PopoverContent>
 
-			<CardActions>
-				<Button size="small" onClick={ closePopover } color="secondary" variant="text">
-					{ __( 'Cancel', 'elementor' ) }
-				</Button>
+			<CardActions sx={ { pt: 0.5, pb: 1 } }>
 				<Button size="small" variant="contained" disabled={ isFormInvalid() } onClick={ handleCreate }>
 					{ __( 'Create', 'elementor' ) }
 				</Button>
 			</CardActions>
-		</>
+		</PopoverScrollableContent>
 	);
 };

package/src/components/font-variable-edit.tsx

@@ -0,0 +1,163 @@
+import * as React from 'react';
+import { useId, useRef, useState } from 'react';
+import { FontFamilySelector, PopoverContent } from '@elementor/editor-controls';
+import { useFontFamilies, useSectionWidth } from '@elementor/editor-editing-panel';
+import { PopoverHeader, PopoverScrollableContent } from '@elementor/editor-ui';
+import { ArrowLeftIcon, ChevronDownIcon, TextIcon, TrashIcon } from '@elementor/icons';
+import {
+	bindPopover,
+	bindTrigger,
+	Button,
+	CardActions,
+	Divider,
+	FormLabel,
+	Grid,
+	IconButton,
+	Popover,
+	TextField,
+	UnstableTag,
+	usePopupState,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { deleteVariable, updateVariable, useVariable } from '../hooks/use-prop-variables';
+
+const SIZE = 'tiny';
+
+type Props = {
+	editId: string;
+	onClose: () => void;
+	onGoBack?: () => void;
+	onSubmit?: () => void;
+};
+
+export const FontVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props ) => {
+	const variable = useVariable( editId );
+
+	if ( ! variable ) {
+		throw new Error( `Global font variable "${ editId }" not found` );
+	}
+
+	const [ fontFamily, setFontFamily ] = useState( variable.value );
+	const [ label, setLabel ] = useState( variable.label );
+
+	const variableNameId = useId();
+	const variableValueId = useId();
+
+	const anchorRef = useRef< HTMLDivElement >( null );
+	const fontPopoverState = usePopupState( { variant: 'popover' } );
+
+	const fontFamilies = useFontFamilies();
+
+	const handleUpdate = () => {
+		updateVariable( editId, {
+			value: fontFamily,
+			label,
+		} ).then( () => {
+			onSubmit?.();
+		} );
+	};
+
+	const handleDelete = () => {
+		deleteVariable( editId ).then( () => {
+			onSubmit?.();
+		} );
+	};
+
+	const noValueChanged = () => fontFamily === variable.value && label === variable.label;
+	const hasEmptyValue = () => '' === fontFamily.trim() || '' === label.trim();
+	const isSaveDisabled = () => noValueChanged() || hasEmptyValue();
+
+	const sectionWidth = useSectionWidth();
+
+	const actions = [];
+
+	actions.push(
+		<IconButton key="delete" size={ SIZE } aria-label={ __( 'Delete', 'elementor' ) } onClick={ handleDelete }>
+			<TrashIcon fontSize={ SIZE } />
+		</IconButton>
+	);
+
+	return (
+		<PopoverScrollableContent height="auto">
+			<PopoverHeader
+				icon={
+					<>
+						{ onGoBack && (
+							<IconButton size={ SIZE } aria-label={ __( 'Go Back', 'elementor' ) } onClick={ onGoBack }>
+								<ArrowLeftIcon fontSize={ SIZE } />
+							</IconButton>
+						) }
+						<TextIcon fontSize={ SIZE } />
+					</>
+				}
+				title={ __( 'Edit variable', 'elementor' ) }
+				onClose={ onClose }
+				actions={ actions }
+			/>
+
+			<Divider />
+
+			<PopoverContent p={ 2 }>
+				<Grid container gap={ 0.75 } alignItems="center">
+					<Grid item xs={ 12 }>
+						<FormLabel htmlFor={ variableNameId } size="tiny">
+							{ __( 'Name', 'elementor' ) }
+						</FormLabel>
+					</Grid>
+					<Grid item xs={ 12 }>
+						<TextField
+							id={ variableNameId }
+							size="tiny"
+							fullWidth
+							value={ label }
+							onChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => setLabel( e.target.value ) }
+						/>
+					</Grid>
+				</Grid>
+
+				<Grid container gap={ 0.75 } alignItems="center">
+					<Grid item xs={ 12 }>
+						<FormLabel htmlFor={ variableValueId } size="tiny">
+							{ __( 'Value', 'elementor' ) }
+						</FormLabel>
+					</Grid>
+					<Grid item xs={ 12 }>
+						<>
+							<UnstableTag
+								id={ variableValueId }
+								variant="outlined"
+								label={ fontFamily }
+								endIcon={ <ChevronDownIcon fontSize="tiny" /> }
+								{ ...bindTrigger( fontPopoverState ) }
+								fullWidth
+							/>
+							<Popover
+								disablePortal
+								disableScrollLock
+								anchorEl={ anchorRef.current }
+								anchorOrigin={ { vertical: 'top', horizontal: 'right' } }
+								transformOrigin={ { vertical: 'top', horizontal: -20 } }
+								{ ...bindPopover( fontPopoverState ) }
+							>
+								<FontFamilySelector
+									fontFamilies={ fontFamilies }
+									fontFamily={ fontFamily }
+									onFontFamilyChange={ setFontFamily }
+									onClose={ fontPopoverState.close }
+									sectionWidth={ sectionWidth }
+								/>
+							</Popover>
+						</>
+					</Grid>
+				</Grid>
+			</PopoverContent>
+
+			<CardActions sx={ { pt: 0.5, pb: 1 } }>
+				<Button size="small" variant="contained" disabled={ isSaveDisabled() } onClick={ handleUpdate }>
+					{ __( 'Save', 'elementor' ) }
+				</Button>
+			</CardActions>
+		</PopoverScrollableContent>
+	);
+};