@elementor/editor-variables 0.16.0 → 3.32.0-20

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

@@ -1,86 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { PopoverContent, useBoundProp } from '@elementor/editor-controls';
-import { PopoverScrollableContent } from '@elementor/editor-editing-panel';
-import { PopoverHeader } from '@elementor/editor-ui';
-import { ArrowLeftIcon, BrushIcon } from '@elementor/icons';
-import { Button, CardActions, Divider, IconButton } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { createVariable } 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';
-
-const SIZE = 'tiny';
-
-type Props = {
-	onGoBack?: () => void;
-	onClose: () => void;
-};
-
-export const ColorVariableCreation = ( { onGoBack, onClose }: Props ) => {
-	const { setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );
-
-	const [ color, setColor ] = useState( '' );
-	const [ label, setLabel ] = useState( '' );
-
-	const resetFields = () => {
-		setColor( '' );
-		setLabel( '' );
-	};
-
-	const closePopover = () => {
-		resetFields();
-		onClose();
-	};
-
-	const handleCreate = () => {
-		createVariable( {
-			value: color,
-			label,
-			type: colorVariablePropTypeUtil.key,
-		} ).then( ( key ) => {
-			setVariable( key );
-			closePopover();
-		} );
-	};
-
-	const hasEmptyValue = () => {
-		return '' === color.trim() || '' === label.trim();
-	};
-
-	const isSubmitDisabled = hasEmptyValue();
-
-	return (
-		<PopoverScrollableContent height="auto">
-			<PopoverHeader
-				icon={
-					<>
-						{ onGoBack && (
-							<IconButton size={ SIZE } aria-label={ __( 'Go Back', 'elementor' ) } onClick={ onGoBack }>
-								<ArrowLeftIcon fontSize={ SIZE } />
-							</IconButton>
-						) }
-						<BrushIcon fontSize={ SIZE } />
-					</>
-				}
-				title={ __( 'Create variable', 'elementor' ) }
-				onClose={ closePopover }
-			/>
-
-			<Divider />
-
-			<PopoverContent p={ 2 }>
-				<LabelField value={ label } onChange={ setLabel } />
-				<ColorField value={ color } onChange={ setColor } />
-			</PopoverContent>
-
-			<CardActions sx={ { pt: 0.5, pb: 1 } }>
-				<Button size="small" variant="contained" disabled={ isSubmitDisabled } onClick={ handleCreate }>
-					{ __( 'Create', 'elementor' ) }
-				</Button>
-			</CardActions>
-		</PopoverScrollableContent>
-	);
-};

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

@@ -1,138 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { PopoverContent, useBoundProp } from '@elementor/editor-controls';
-import { PopoverScrollableContent } from '@elementor/editor-editing-panel';
-import { PopoverHeader } from '@elementor/editor-ui';
-import { ArrowLeftIcon, BrushIcon, TrashIcon } from '@elementor/icons';
-import { Button, CardActions, Divider, 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 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?.();
-		} );
-	};
-
-	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 (
-		<>
-			<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 }>
-					<LabelField value={ label } onChange={ setLabel } />
-					<ColorField value={ color } onChange={ setColor } />
-				</PopoverContent>
-
-				<CardActions sx={ { pt: 0.5, pb: 1 } }>
-					<Button size="small" variant="contained" disabled={ isSubmitDisabled } onClick={ handleUpdate }>
-						{ __( 'Save', 'elementor' ) }
-					</Button>
-				</CardActions>
-			</PopoverScrollableContent>
-
-			{ deleteConfirmation && (
-				<DeleteConfirmationDialog
-					open
-					label={ label }
-					onConfirm={ handleDelete }
-					closeDialog={ closeDeleteDialog() }
-				/>
-			) }
-		</>
-	);
-};

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

@@ -1,130 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { useBoundProp } from '@elementor/editor-controls';
-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 { 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 (
-		<>
-			<PopoverHeader
-				title={ __( 'Variables', 'elementor' ) }
-				icon={ <ColorFilterIcon fontSize={ SIZE } /> }
-				onClose={ closePopover }
-				actions={ actions }
-			/>
-
-			{ hasVariables && (
-				<PopoverSearch
-					value={ searchValue }
-					onSearch={ handleSearch }
-					placeholder={ __( 'Search', 'elementor' ) }
-				/>
-			) }
-
-			<Divider />
-
-			<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,86 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { PopoverContent, useBoundProp } from '@elementor/editor-controls';
-import { PopoverScrollableContent } from '@elementor/editor-editing-panel';
-import { PopoverHeader } from '@elementor/editor-ui';
-import { ArrowLeftIcon, TextIcon } from '@elementor/icons';
-import { Button, CardActions, Divider, 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 resetFields = () => {
-		setFontFamily( '' );
-		setLabel( '' );
-	};
-
-	const closePopover = () => {
-		resetFields();
-		onClose();
-	};
-
-	const handleCreate = () => {
-		createVariable( {
-			value: fontFamily,
-			label,
-			type: fontVariablePropTypeUtil.key,
-		} ).then( ( key ) => {
-			setVariable( key );
-			closePopover();
-		} );
-	};
-
-	const hasEmptyValue = () => {
-		return '' === fontFamily.trim() || '' === label.trim();
-	};
-
-	const isSubmitDisabled = hasEmptyValue();
-
-	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 }
-			/>
-
-			<Divider />
-
-			<PopoverContent p={ 2 }>
-				<LabelField value={ label } onChange={ setLabel } />
-				<FontField value={ fontFamily } onChange={ setFontFamily } />
-			</PopoverContent>
-
-			<CardActions sx={ { pt: 0.5, pb: 1 } }>
-				<Button size="small" variant="contained" disabled={ isSubmitDisabled } onClick={ handleCreate }>
-					{ __( 'Create', 'elementor' ) }
-				</Button>
-			</CardActions>
-		</PopoverScrollableContent>
-	);
-};

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

@@ -1,138 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { PopoverContent, useBoundProp } from '@elementor/editor-controls';
-import { PopoverScrollableContent } from '@elementor/editor-editing-panel';
-import { PopoverHeader } from '@elementor/editor-ui';
-import { ArrowLeftIcon, TextIcon, TrashIcon } from '@elementor/icons';
-import { Button, CardActions, Divider, 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 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?.();
-		} );
-	};
-
-	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 (
-		<>
-			<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 }>
-					<LabelField value={ label } onChange={ setLabel } />
-					<FontField value={ fontFamily } onChange={ setFontFamily } />
-				</PopoverContent>
-
-				<CardActions sx={ { pt: 0.5, pb: 1 } }>
-					<Button size="small" variant="contained" disabled={ isSubmitDisabled } onClick={ handleUpdate }>
-						{ __( 'Save', 'elementor' ) }
-					</Button>
-				</CardActions>
-			</PopoverScrollableContent>
-
-			{ deleteConfirmation && (
-				<DeleteConfirmationDialog
-					open
-					label={ label }
-					onConfirm={ handleDelete }
-					closeDialog={ closeDeleteDialog() }
-				/>
-			) }
-		</>
-	);
-};

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

@@ -1,129 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { useBoundProp } from '@elementor/editor-controls';
-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 { useFilteredVariables } from '../hooks/use-prop-variables';
-import { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';
-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 = {
-	closePopover: () => void;
-	onAdd?: () => void;
-	onEdit?: ( key: string ) => void;
-	onSettings?: () => void;
-};
-
-export const FontVariablesSelection = ( { closePopover, onAdd, onEdit, onSettings }: Props ) => {
-	const { value: variable, setValue: setVariable } = useBoundProp( fontVariablePropTypeUtil );
-	const [ searchValue, setSearchValue ] = useState( '' );
-
-	const {
-		list: variables,
-		hasMatches: hasSearchResults,
-		isSourceNotEmpty: hasVariables,
-	} = useFilteredVariables( searchValue, fontVariablePropTypeUtil.key );
-
-	const handleSetVariable = ( 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: <TextIcon fontSize={ SIZE } />,
-		secondaryText: value,
-		onEdit: () => onEdit?.( key ),
-	} ) );
-
-	const handleSearch = ( search: string ) => {
-		setSearchValue( search );
-	};
-
-	const handleClearSearch = () => {
-		setSearchValue( '' );
-	};
-
-	return (
-		<>
-			<PopoverHeader
-				title={ __( 'Variables', 'elementor' ) }
-				onClose={ closePopover }
-				icon={ <ColorFilterIcon fontSize={ SIZE } /> }
-				actions={ actions }
-			/>
-
-			{ hasVariables && (
-				<PopoverSearch
-					value={ searchValue }
-					onSearch={ handleSearch }
-					placeholder={ __( 'Search', 'elementor' ) }
-				/>
-			) }
-
-			<Divider />
-
-			<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>
-		</>
-	);
-};