@elementor/editor-variables 0.16.0 → 3.32.0-20

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,33 +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 } />;
-	}
-
-	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,31 +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 } />;
-	}
-
-	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 } />
-			);
-		},
-	};
-};

package/src/init-color-variables.ts

@@ -1,27 +0,0 @@
-import { styleTransformersRegistry } from '@elementor/editor-canvas';
-import { controlActionsMenu, registerControlReplacement } from '@elementor/editor-editing-panel';
-
-import { ColorVariableControl } from './controls/color-variable-control';
-import { usePropColorVariableAction } from './hooks/use-prop-color-variable-action';
-import { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';
-import { registerRepeaterInjections } from './repeater-injections';
-import { variableTransformer } from './transformers/variable-transformer';
-import { hasAssignedColorVariable } from './utils';
-
-const { registerPopoverAction } = controlActionsMenu;
-
-export function initColorVariables() {
-	registerControlReplacement( {
-		component: ColorVariableControl,
-		condition: ( { value } ) => hasAssignedColorVariable( value ),
-	} );
-
-	registerPopoverAction( {
-		id: 'color-variables',
-		useProps: usePropColorVariableAction,
-	} );
-
-	styleTransformersRegistry.register( colorVariablePropTypeUtil.key, variableTransformer );
-
-	registerRepeaterInjections();
-}

package/src/init-font-variables.ts

@@ -1,24 +0,0 @@
-import { styleTransformersRegistry } from '@elementor/editor-canvas';
-import { controlActionsMenu, registerControlReplacement } from '@elementor/editor-editing-panel';
-
-import { FontVariableControl } from './controls/font-variable-control';
-import { usePropFontVariableAction } from './hooks/use-prop-font-variable-action';
-import { fontVariablePropTypeUtil } from './prop-types/font-variable-prop-type';
-import { variableTransformer } from './transformers/variable-transformer';
-import { hasAssignedFontVariable } from './utils';
-
-const { registerPopoverAction } = controlActionsMenu;
-
-export function initFontVariables() {
-	registerControlReplacement( {
-		component: FontVariableControl,
-		condition: ( { value } ) => hasAssignedFontVariable( value ),
-	} );
-
-	registerPopoverAction( {
-		id: 'font-variables',
-		useProps: usePropFontVariableAction,
-	} );
-
-	styleTransformersRegistry.register( fontVariablePropTypeUtil.key, variableTransformer );
-}

package/src/utils.ts

@@ -1,20 +0,0 @@
-import { type PropType, type PropValue } from '@elementor/editor-props';
-
-import { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';
-import { fontVariablePropTypeUtil } from './prop-types/font-variable-prop-type';
-
-export const hasAssignedColorVariable = ( propValue: PropValue ): boolean => {
-	return !! colorVariablePropTypeUtil.isValid( propValue );
-};
-
-export const supportsColorVariables = ( propType: PropType ): boolean => {
-	return propType.kind === 'union' && colorVariablePropTypeUtil.key in propType.prop_types;
-};
-
-export const hasAssignedFontVariable = ( propValue: PropValue ): boolean => {
-	return !! fontVariablePropTypeUtil.isValid( propValue );
-};
-
-export const supportsFontVariables = ( propType: PropType ): boolean => {
-	return propType.kind === 'union' && fontVariablePropTypeUtil.key in propType.prop_types;
-};