@elementor/editor-variables 0.13.0 → 0.14.0

package/src/types.ts

@@ -1,15 +1,19 @@
-export type VariableKey = string;
-
-export type VariableValue = string;
+import type * as React from 'react';
+import { type VirtualizedItem } from '@elementor/editor-ui';
 
 export type Variable = {
-	value: VariableValue;
+	key?: string;
 	label: string;
+	value: string;
 	type: string;
+	deleted?: boolean;
+	deleted_at?: string;
 };
 
-export type Variables = {
-	[ key: VariableKey ]: Variable;
-};
+export type StyleVariables = Record< string, string >;
 
-export type StyleVariables = Record< VariableKey, VariableValue >;
+export type ExtendedVirtualizedItem = VirtualizedItem< 'item', string > & {
+	icon: React.ReactNode;
+	secondaryText: string;
+	onEdit?: () => void;
+};

package/src/components/styled-menu-item.tsx

@@ -1,10 +0,0 @@
-import { MenuItem, styled } from '@elementor/ui';
-
-export const StyledMenuItem = styled( MenuItem )( () => ( {
-	pl: 2,
-	pr: 1,
-	py: 0.5,
-	'&:hover .MuiSvgIcon-root': {
-		opacity: 1,
-	},
-} ) );

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

@@ -1,119 +0,0 @@
-import * as React from 'react';
-import { useId, useRef } from 'react';
-import { PopoverHeader } from '@elementor/editor-ui';
-import { ColorFilterIcon, DetachIcon, PlusIcon } from '@elementor/icons';
-import {
-	bindPopover,
-	bindTrigger,
-	Box,
-	IconButton,
-	Popover,
-	Stack,
-	Typography,
-	UnstableTag as Tag,
-	usePopupState,
-} from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-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 { FontVariableCreation } from './font-variable-creation';
-
-type Props = {
-	selectedVariable: Variable;
-	unlinkVariable: () => void;
-	children: ( { closePopover }: { closePopover: () => void } ) => React.ReactNode;
-	startTagAdornment?: React.ReactNode;
-};
-
-const SIZE = 'tiny';
-
-export const VariablesSelectionPopover = ( {
-	selectedVariable,
-	unlinkVariable,
-	startTagAdornment,
-	children,
-}: Props ) => {
-	const id = useId();
-	const popupState = usePopupState( { variant: 'popover', popupId: `elementor-variables-action-${ id }` } );
-	const creationPopupState = usePopupState( { variant: 'popover', popupId: `elementor-variables-creation-${ id }` } );
-
-	const closePopover = () => popupState.close();
-
-	const handleCreateButtonClick = ( event: React.MouseEvent ) => {
-		closePopover();
-		bindTrigger( creationPopupState ).onClick( event );
-	};
-
-	const anchorRef = useRef< HTMLDivElement >( null );
-	const { label } = selectedVariable;
-
-	const colorCreationEnabled = colorVariablePropTypeUtil.key === selectedVariable.type;
-	const fontCreationEnabled = fontVariablePropTypeUtil.key === selectedVariable.type;
-
-	return (
-		<Box ref={ anchorRef }>
-			<Tag
-				fullWidth
-				showActionsOnHover
-				{ ...bindTrigger( popupState ) }
-				startIcon={
-					<Stack spacing={ 1 } direction="row" alignItems="center">
-						{ startTagAdornment }
-						<ColorFilterIcon fontSize={ 'inherit' } sx={ { mr: 1 } } />
-					</Stack>
-				}
-				label={
-					<Box sx={ { display: 'inline-grid' } }>
-						<Typography sx={ { textOverflow: 'ellipsis', overflowX: 'hidden' } } variant="subtitle2">
-							{ label }
-						</Typography>
-					</Box>
-				}
-				actions={
-					<IconButton size={ SIZE } onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>
-						<DetachIcon fontSize={ SIZE } />
-					</IconButton>
-				}
-			/>
-			<Popover
-				{ ...bindPopover( popupState ) }
-				disableScrollLock
-				anchorEl={ anchorRef.current }
-				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
-				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
-			>
-				<PopoverHeader
-					title={ __( 'Variables', 'elementor' ) }
-					onClose={ closePopover }
-					icon={ <ColorFilterIcon fontSize={ SIZE } /> }
-					actions={ [
-						<IconButton
-							key="createVariable"
-							{ ...bindTrigger( creationPopupState ) }
-							size={ SIZE }
-							onClick={ handleCreateButtonClick }
-						>
-							<PlusIcon fontSize={ SIZE } />
-						</IconButton>,
-					] }
-				/>
-				{ children?.( { closePopover } ) }
-			</Popover>
-
-			<Box ref={ anchorRef }>
-				<Popover
-					{ ...bindPopover( creationPopupState ) }
-					anchorEl={ anchorRef.current }
-					anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
-					transformOrigin={ { vertical: 'top', horizontal: 'right' } }
-				>
-					{ colorCreationEnabled && <ColorVariableCreation onClose={ creationPopupState.close } /> }
-					{ fontCreationEnabled && <FontVariableCreation onClose={ creationPopupState.close } /> }
-				</Popover>
-			</Box>
-		</Box>
-	);
-};

package/src/controls/color-variables-selection-control.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import { useBoundProp } from '@elementor/editor-controls';
-import { colorPropTypeUtil } from '@elementor/editor-props';
-
-import { ColorIndicator } from '../components/color-indicator';
-import { ColorVariablesSelection } from '../components/color-variables-selection';
-import { VariablesSelectionPopover } from '../components/variables-selection-popover';
-import { useVariable } from '../hooks/use-prop-variables';
-import { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';
-
-export const ColorVariablesSelectionControl = () => {
-	const { setValue } = useBoundProp();
-	const { value: variableValue } = useBoundProp( colorVariablePropTypeUtil );
-
-	const selectedVariable = useVariable( variableValue );
-
-	if ( ! selectedVariable ) {
-		throw new Error( `Global color variable ${ variableValue } not found` );
-	}
-
-	const unlinkVariable = () => {
-		setValue( colorPropTypeUtil.create( selectedVariable.value ) );
-	};
-
-	return (
-		<VariablesSelectionPopover
-			selectedVariable={ selectedVariable }
-			unlinkVariable={ unlinkVariable }
-			startTagAdornment={ <ColorIndicator size="inherit" component="span" value={ selectedVariable.value } /> }
-		>
-			{ ( { closePopover } ) => <ColorVariablesSelection onSelect={ closePopover } /> }
-		</VariablesSelectionPopover>
-	);
-};

package/src/controls/font-variables-selection-control.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import { useBoundProp } from '@elementor/editor-controls';
-import { stringPropTypeUtil } from '@elementor/editor-props';
-
-import { FontVariablesSelection } from '../components/font-variables-selection';
-import { VariablesSelectionPopover } from '../components/variables-selection-popover';
-import { useVariable } from '../hooks/use-prop-variables';
-import { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';
-
-export const FontVariablesSelectionControl = () => {
-	const { setValue: setFontFamily } = useBoundProp();
-	const { value: variableValue } = useBoundProp( fontVariablePropTypeUtil );
-
-	const selectedVariable = useVariable( variableValue );
-
-	if ( ! selectedVariable ) {
-		throw new Error( `Global font variable ${ variableValue } not found` );
-	}
-
-	const unlinkVariable = () => {
-		setFontFamily( stringPropTypeUtil.create( selectedVariable.value ) );
-	};
-
-	return (
-		<VariablesSelectionPopover selectedVariable={ selectedVariable } unlinkVariable={ unlinkVariable }>
-			{ ( { closePopover } ) => <FontVariablesSelection onSelect={ closePopover } /> }
-		</VariablesSelectionPopover>
-	);
-};