@elementor/editor-variables 0.18.0 → 3.32.0-21

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

@@ -1,157 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { PopoverContent, useBoundProp } from '@elementor/editor-controls';
-import { PopoverBody } from '@elementor/editor-editing-panel';
-import { PopoverHeader } from '@elementor/editor-ui';
-import { ArrowLeftIcon, BrushIcon, TrashIcon } from '@elementor/icons';
-import { Button, CardActions, Divider, FormHelperText, IconButton } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { deleteVariable, updateVariable, useVariable } from '../hooks/use-prop-variables';
-import { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';
-import { ColorField } from './fields/color-field';
-import { LabelField } from './fields/label-field';
-import { DeleteConfirmationDialog } from './ui/delete-confirmation-dialog';
-
-const SIZE = 'tiny';
-
-type Props = {
-	editId: string;
-	onClose: () => void;
-	onGoBack?: () => void;
-	onSubmit?: () => void;
-};
-
-export const ColorVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props ) => {
-	const { setValue: notifyBoundPropChange, value: assignedValue } = useBoundProp( colorVariablePropTypeUtil );
-	const [ deleteConfirmation, setDeleteConfirmation ] = useState( false );
-	const [ errorMessage, setErrorMessage ] = useState( '' );
-
-	const variable = useVariable( editId );
-	if ( ! variable ) {
-		throw new Error( `Global color variable not found` );
-	}
-
-	const [ color, setColor ] = useState( variable.value );
-	const [ label, setLabel ] = useState( variable.label );
-
-	const handleUpdate = () => {
-		updateVariable( editId, {
-			value: color,
-			label,
-		} )
-			.then( () => {
-				maybeTriggerBoundPropChange();
-				onSubmit?.();
-			} )
-			.catch( ( error ) => {
-				setErrorMessage( error.message );
-			} );
-	};
-
-	const handleDelete = () => {
-		deleteVariable( editId ).then( () => {
-			maybeTriggerBoundPropChange();
-			onSubmit?.();
-		} );
-	};
-
-	const maybeTriggerBoundPropChange = () => {
-		if ( editId === assignedValue ) {
-			notifyBoundPropChange( editId );
-		}
-	};
-
-	const handleDeleteConfirmation = () => {
-		setDeleteConfirmation( true );
-	};
-
-	const closeDeleteDialog = () => () => {
-		setDeleteConfirmation( false );
-	};
-
-	const actions = [];
-
-	actions.push(
-		<IconButton
-			key="delete"
-			size={ SIZE }
-			aria-label={ __( 'Delete', 'elementor' ) }
-			onClick={ handleDeleteConfirmation }
-		>
-			<TrashIcon fontSize={ SIZE } />
-		</IconButton>
-	);
-
-	const hasEmptyValues = () => {
-		return ! color.trim() || ! label.trim();
-	};
-
-	const noValueChanged = () => {
-		return color === variable.value && label === variable.label;
-	};
-
-	const isSubmitDisabled = noValueChanged() || hasEmptyValues();
-
-	return (
-		<>
-			<PopoverBody 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 }>
-					<LabelField
-						value={ label }
-						onChange={ ( value ) => {
-							setLabel( value );
-							setErrorMessage( '' );
-						} }
-					/>
-					<ColorField
-						value={ color }
-						onChange={ ( value ) => {
-							setColor( value );
-							setErrorMessage( '' );
-						} }
-					/>
-
-					{ errorMessage && <FormHelperText error>{ errorMessage }</FormHelperText> }
-				</PopoverContent>
-
-				<CardActions sx={ { pt: 0.5, pb: 1 } }>
-					<Button size="small" variant="contained" disabled={ isSubmitDisabled } onClick={ handleUpdate }>
-						{ __( 'Save', 'elementor' ) }
-					</Button>
-				</CardActions>
-			</PopoverBody>
-
-			{ deleteConfirmation && (
-				<DeleteConfirmationDialog
-					open
-					label={ label }
-					onConfirm={ handleDelete }
-					closeDialog={ closeDeleteDialog() }
-				/>
-			) }
-		</>
-	);
-};

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

@@ -1,128 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { useBoundProp } from '@elementor/editor-controls';
-import { PopoverBody } 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 { useFilteredVariables } from '../hooks/use-prop-variables';
-import { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';
-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 = {
-	closePopover: () => void;
-	onAdd?: () => void;
-	onEdit?: ( key: string ) => void;
-	onSettings?: () => void;
-};
-
-export const ColorVariablesSelection = ( { closePopover, onAdd, onEdit, onSettings }: Props ) => {
-	const { value: variable, setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );
-	const [ searchValue, setSearchValue ] = useState( '' );
-
-	const {
-		list: variables,
-		hasMatches: hasSearchResults,
-		isSourceNotEmpty: hasVariables,
-	} = useFilteredVariables( searchValue, colorVariablePropTypeUtil.key );
-
-	const handleSetColorVariable = ( key: string ) => {
-		setVariable( key );
-		closePopover();
-	};
-
-	const actions = [];
-
-	if ( onAdd ) {
-		actions.push(
-			<IconButton key="add" size={ SIZE } onClick={ onAdd }>
-				<PlusIcon fontSize={ SIZE } />
-			</IconButton>
-		);
-	}
-
-	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 (
-		<PopoverBody>
-			<PopoverHeader
-				title={ __( 'Variables', 'elementor' ) }
-				icon={ <ColorFilterIcon fontSize={ SIZE } /> }
-				onClose={ closePopover }
-				actions={ actions }
-			/>
-
-			{ hasVariables && (
-				<PopoverSearch
-					value={ searchValue }
-					onSearch={ handleSearch }
-					placeholder={ __( 'Search', 'elementor' ) }
-				/>
-			) }
-
-			<Divider />
-
-			{ 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 }
-				/>
-			) }
-		</PopoverBody>
-	);
-};

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

@@ -1,106 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { PopoverContent, useBoundProp } from '@elementor/editor-controls';
-import { PopoverBody } from '@elementor/editor-editing-panel';
-import { PopoverHeader } from '@elementor/editor-ui';
-import { ArrowLeftIcon, TextIcon } from '@elementor/icons';
-import { Button, CardActions, Divider, FormHelperText, IconButton } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { createVariable } from '../hooks/use-prop-variables';
-import { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';
-import { FontField } from './fields/font-field';
-import { LabelField } from './fields/label-field';
-
-const SIZE = 'tiny';
-
-type Props = {
-	onGoBack?: () => void;
-	onClose: () => void;
-};
-
-export const FontVariableCreation = ( { onClose, onGoBack }: Props ) => {
-	const { setValue: setVariable } = useBoundProp( fontVariablePropTypeUtil );
-
-	const [ fontFamily, setFontFamily ] = useState( '' );
-	const [ label, setLabel ] = useState( '' );
-	const [ errorMessage, setErrorMessage ] = useState( '' );
-
-	const resetFields = () => {
-		setFontFamily( '' );
-		setLabel( '' );
-		setErrorMessage( '' );
-	};
-
-	const closePopover = () => {
-		resetFields();
-		onClose();
-	};
-
-	const handleCreate = () => {
-		createVariable( {
-			value: fontFamily,
-			label,
-			type: fontVariablePropTypeUtil.key,
-		} )
-			.then( ( key ) => {
-				setVariable( key );
-				closePopover();
-			} )
-			.catch( ( error ) => {
-				setErrorMessage( error.message );
-			} );
-	};
-
-	const hasEmptyValue = () => {
-		return '' === fontFamily.trim() || '' === label.trim();
-	};
-
-	const isSubmitDisabled = hasEmptyValue();
-
-	return (
-		<PopoverBody 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 }
-			/>
-
-			<Divider />
-
-			<PopoverContent p={ 2 }>
-				<LabelField
-					value={ label }
-					onChange={ ( value ) => {
-						setLabel( value );
-						setErrorMessage( '' );
-					} }
-				/>
-				<FontField
-					value={ fontFamily }
-					onChange={ ( value ) => {
-						setFontFamily( value );
-						setErrorMessage( '' );
-					} }
-				/>
-
-				{ errorMessage && <FormHelperText error>{ errorMessage }</FormHelperText> }
-			</PopoverContent>
-
-			<CardActions sx={ { pt: 0.5, pb: 1 } }>
-				<Button size="small" variant="contained" disabled={ isSubmitDisabled } onClick={ handleCreate }>
-					{ __( 'Create', 'elementor' ) }
-				</Button>
-			</CardActions>
-		</PopoverBody>
-	);
-};

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

@@ -1,157 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { PopoverContent, useBoundProp } from '@elementor/editor-controls';
-import { PopoverBody } from '@elementor/editor-editing-panel';
-import { PopoverHeader } from '@elementor/editor-ui';
-import { ArrowLeftIcon, TextIcon, TrashIcon } from '@elementor/icons';
-import { Button, CardActions, Divider, FormHelperText, IconButton } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { deleteVariable, updateVariable, useVariable } from '../hooks/use-prop-variables';
-import { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';
-import { FontField } from './fields/font-field';
-import { LabelField } from './fields/label-field';
-import { DeleteConfirmationDialog } from './ui/delete-confirmation-dialog';
-
-const SIZE = 'tiny';
-
-type Props = {
-	editId: string;
-	onClose: () => void;
-	onGoBack?: () => void;
-	onSubmit?: () => void;
-};
-
-export const FontVariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props ) => {
-	const { setValue: notifyBoundPropChange, value: assignedValue } = useBoundProp( fontVariablePropTypeUtil );
-	const [ deleteConfirmation, setDeleteConfirmation ] = useState( false );
-	const [ errorMessage, setErrorMessage ] = useState( '' );
-
-	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 handleUpdate = () => {
-		updateVariable( editId, {
-			value: fontFamily,
-			label,
-		} )
-			.then( () => {
-				maybeTriggerBoundPropChange();
-				onSubmit?.();
-			} )
-			.catch( ( error ) => {
-				setErrorMessage( error.message );
-			} );
-	};
-
-	const handleDelete = () => {
-		deleteVariable( editId ).then( () => {
-			maybeTriggerBoundPropChange();
-			onSubmit?.();
-		} );
-	};
-
-	const maybeTriggerBoundPropChange = () => {
-		if ( editId === assignedValue ) {
-			notifyBoundPropChange( editId );
-		}
-	};
-
-	const handleDeleteConfirmation = () => {
-		setDeleteConfirmation( true );
-	};
-
-	const closeDeleteDialog = () => () => {
-		setDeleteConfirmation( false );
-	};
-
-	const hasEmptyValue = () => {
-		return ! fontFamily.trim() || ! label.trim();
-	};
-
-	const noValueChanged = () => {
-		return fontFamily === variable.value && label === variable.label;
-	};
-
-	const isSubmitDisabled = noValueChanged() || hasEmptyValue();
-
-	const actions = [];
-
-	actions.push(
-		<IconButton
-			key="delete"
-			size={ SIZE }
-			aria-label={ __( 'Delete', 'elementor' ) }
-			onClick={ handleDeleteConfirmation }
-		>
-			<TrashIcon fontSize={ SIZE } />
-		</IconButton>
-	);
-
-	return (
-		<>
-			<PopoverBody 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 }>
-					<LabelField
-						value={ label }
-						onChange={ ( value ) => {
-							setLabel( value );
-							setErrorMessage( '' );
-						} }
-					/>
-					<FontField
-						value={ fontFamily }
-						onChange={ ( value ) => {
-							setFontFamily( value );
-							setErrorMessage( '' );
-						} }
-					/>
-
-					{ errorMessage && <FormHelperText error>{ errorMessage }</FormHelperText> }
-				</PopoverContent>
-
-				<CardActions sx={ { pt: 0.5, pb: 1 } }>
-					<Button size="small" variant="contained" disabled={ isSubmitDisabled } onClick={ handleUpdate }>
-						{ __( 'Save', 'elementor' ) }
-					</Button>
-				</CardActions>
-			</PopoverBody>
-
-			{ deleteConfirmation && (
-				<DeleteConfirmationDialog
-					open
-					label={ label }
-					onConfirm={ handleDelete }
-					closeDialog={ closeDeleteDialog() }
-				/>
-			) }
-		</>
-	);
-};

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

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

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

@@ -1,39 +0,0 @@
-import * as React from 'react';
-import { useBoundProp } from '@elementor/editor-controls';
-import { colorPropTypeUtil } from '@elementor/editor-props';
-
-import { ColorIndicator } from '../components/ui/color-indicator';
-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';
-
-export const ColorVariableControl = () => {
-	const { value: variableValue } = useBoundProp( colorVariablePropTypeUtil );
-	const assignedVariable = useVariable( variableValue );
-
-	if ( ! assignedVariable ) {
-		throw new Error( `Global color variable ${ variableValue } not found` );
-	}
-
-	const isVariableDeleted = assignedVariable?.deleted;
-
-	if ( isVariableDeleted ) {
-		return (
-			<DeletedVariable
-				variable={ assignedVariable }
-				variablePropTypeUtil={ colorVariablePropTypeUtil }
-				fallbackPropTypeUtil={ colorPropTypeUtil }
-			/>
-		);
-	}
-
-	return (
-		<AssignedVariable
-			variable={ assignedVariable }
-			variablePropTypeUtil={ colorVariablePropTypeUtil }
-			fallbackPropTypeUtil={ colorPropTypeUtil }
-			additionalStartIcon={ <ColorIndicator size="inherit" value={ assignedVariable.value } component="span" /> }
-		/>
-	);
-};

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

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { useBoundProp } from '@elementor/editor-controls';
-import { stringPropTypeUtil } from '@elementor/editor-props';
-
-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';
-
-export const FontVariableControl = () => {
-	const { value: variableValue } = useBoundProp( fontVariablePropTypeUtil );
-	const assignedVariable = useVariable( variableValue );
-
-	if ( ! assignedVariable ) {
-		throw new Error( `Global font variable ${ variableValue } not found` );
-	}
-
-	const isVariableDeleted = assignedVariable?.deleted;
-
-	if ( isVariableDeleted ) {
-		return (
-			<DeletedVariable
-				variable={ assignedVariable }
-				variablePropTypeUtil={ fontVariablePropTypeUtil }
-				fallbackPropTypeUtil={ stringPropTypeUtil }
-			/>
-		);
-	}
-
-	return (
-		<AssignedVariable
-			variable={ assignedVariable }
-			variablePropTypeUtil={ fontVariablePropTypeUtil }
-			fallbackPropTypeUtil={ stringPropTypeUtil }
-		/>
-	);
-};

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

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { type PopoverActionProps, useBoundProp } from '@elementor/editor-editing-panel';
-import { ColorFilterIcon } from '@elementor/icons';
-import { __ } from '@wordpress/i18n';
-
-import { VariableSelectionPopover } from '../components/variable-selection-popover';
-import { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';
-import { supportsColorVariables } from '../utils';
-
-export const usePropColorVariableAction = (): PopoverActionProps => {
-	const { propType } = useBoundProp();
-
-	const visible = !! propType && supportsColorVariables( propType );
-
-	return {
-		visible,
-		icon: ColorFilterIcon,
-		title: __( 'Variables', 'elementor' ),
-		content: ( { close: closePopover } ) => {
-			return (
-				<VariableSelectionPopover closePopover={ closePopover } propTypeKey={ colorVariablePropTypeUtil.key } />
-			);
-		},
-	};
-};

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

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { type PopoverActionProps, useBoundProp } from '@elementor/editor-editing-panel';
-import { ColorFilterIcon } from '@elementor/icons';
-import { __ } from '@wordpress/i18n';
-
-import { VariableSelectionPopover } from '../components/variable-selection-popover';
-import { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';
-import { supportsFontVariables } from '../utils';
-
-export const usePropFontVariableAction = (): PopoverActionProps => {
-	const { propType } = useBoundProp();
-
-	const visible = !! propType && supportsFontVariables( propType );
-
-	return {
-		visible,
-		icon: ColorFilterIcon,
-		title: __( 'Variables', 'elementor' ),
-		content: ( { close: closePopover } ) => {
-			return (
-				<VariableSelectionPopover closePopover={ closePopover } propTypeKey={ fontVariablePropTypeUtil.key } />
-			);
-		},
-	};
-};