@elementor/editor-variables 4.1.0-772 → 4.1.0-773

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "4.1.0-772",
+  "version": "4.1.0-773",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,22 +39,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.1.0-772",
-    "@elementor/editor-canvas": "4.1.0-772",
-    "@elementor/editor-controls": "4.1.0-772",
-    "@elementor/editor-current-user": "4.1.0-772",
-    "@elementor/editor-mcp": "4.1.0-772",
-    "@elementor/editor-panels": "4.1.0-772",
-    "@elementor/editor-props": "4.1.0-772",
-    "@elementor/editor-ui": "4.1.0-772",
-    "@elementor/editor-v1-adapters": "4.1.0-772",
-    "@elementor/menus": "4.1.0-772",
-    "@elementor/http-client": "4.1.0-772",
+    "@elementor/editor": "4.1.0-773",
+    "@elementor/editor-canvas": "4.1.0-773",
+    "@elementor/editor-controls": "4.1.0-773",
+    "@elementor/editor-current-user": "4.1.0-773",
+    "@elementor/editor-mcp": "4.1.0-773",
+    "@elementor/editor-panels": "4.1.0-773",
+    "@elementor/editor-props": "4.1.0-773",
+    "@elementor/editor-ui": "4.1.0-773",
+    "@elementor/editor-v1-adapters": "4.1.0-773",
+    "@elementor/menus": "4.1.0-773",
+    "@elementor/http-client": "4.1.0-773",
     "@elementor/icons": "^1.72.0",
-    "@elementor/events": "4.1.0-772",
-    "@elementor/schema": "4.1.0-772",
+    "@elementor/events": "4.1.0-773",
+    "@elementor/schema": "4.1.0-773",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.1.0-772",
+    "@elementor/utils": "4.1.0-773",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/variables-repeater-item-slot.tsx

@@ -1,29 +1,57 @@
 import * as React from 'react';
-import { type BackgroundColorOverlayPropValue, type BoxShadowPropValue, type PropValue } from '@elementor/editor-props';
+import {
+	type BackgroundColorOverlayPropValue,
+	type BoxShadowPropValue,
+	type KeyValuePropValue,
+	type PropValue,
+	selectionSizePropTypeUtil,
+	type SelectionSizePropValue,
+} from '@elementor/editor-props';
 
 import { useVariable } from '../hooks/use-prop-variables';
 import { ColorIndicator } from './ui/color-indicator';
 
+type Props = {
+	value: PropValue;
+};
+
 const useColorVariable = ( value: BackgroundColorOverlayPropValue | BoxShadowPropValue ) => {
 	const variableId = value?.value?.color?.value;
 
 	return useVariable( variableId || '' );
 };
 
-export const BackgroundRepeaterColorIndicator = ( { value }: { value: PropValue } ) => {
+export const BackgroundRepeaterColorIndicator = ( { value }: Props ) => {
 	const colorVariable = useColorVariable( value as BackgroundColorOverlayPropValue );
 
 	return <ColorIndicator component="span" size="inherit" value={ colorVariable?.value } />;
 };
 
-export const BackgroundRepeaterLabel = ( { value }: { value: PropValue } ) => {
+export const BackgroundRepeaterLabel = ( { value }: Props ) => {
 	const colorVariable = useColorVariable( value as BackgroundColorOverlayPropValue );
 
 	return <span>{ colorVariable?.label }</span>;
 };
 
-export const BoxShadowRepeaterColorIndicator = ( { value }: { value: PropValue } ) => {
+export const BoxShadowRepeaterColorIndicator = ( { value }: Props ) => {
 	const colorVariable = useColorVariable( value as BoxShadowPropValue );
 
 	return <ColorIndicator component="span" size="inherit" value={ colorVariable?.value } />;
 };
+
+export const TransitionsSizeVariableLabel = ( { value: prop }: Props ) => {
+	let label = '';
+
+	const variableId = ( prop as SelectionSizePropValue )?.value?.size?.value || '';
+	const variable = useVariable( variableId );
+
+	if ( variable && selectionSizePropTypeUtil.isValid( prop ) ) {
+		const selection = ( prop.value?.selection as KeyValuePropValue )?.value?.key?.value;
+		if ( selection ) {
+			label += `${ selection }: `;
+		}
+		label += variable?.value;
+	}
+
+	return <span>{ label }</span>;
+};

package/src/prop-types/custom-size-variable-prop-type.ts

@@ -0,0 +1,4 @@
+import { createPropUtils } from '@elementor/editor-props';
+import { z } from '@elementor/schema';
+
+export const customSizeVariablePropTypeUtil = createPropUtils( 'global-custom-size-variable', z.string() );

package/src/prop-types/index.ts

@@ -0,0 +1,4 @@
+export * from './color-variable-prop-type';
+export * from './custom-size-variable-prop-type';
+export * from './font-variable-prop-type';
+export * from './size-variable-prop-type';

package/src/repeater-injections.ts

@@ -1,39 +1,79 @@
 import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from '@elementor/editor-controls';
-import { backgroundColorOverlayPropTypeUtil, type PropValue, shadowPropTypeUtil } from '@elementor/editor-props';
+import {
+	backgroundColorOverlayPropTypeUtil,
+	type PropValue,
+	selectionSizePropTypeUtil,
+	shadowPropTypeUtil,
+} from '@elementor/editor-props';
 
 import {
 	BackgroundRepeaterColorIndicator,
 	BackgroundRepeaterLabel,
 	BoxShadowRepeaterColorIndicator,
+	TransitionsSizeVariableLabel,
 } from './components/variables-repeater-item-slot';
-import { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';
+import { colorVariablePropTypeUtil, customSizeVariablePropTypeUtil, sizeVariablePropTypeUtil } from './prop-types';
+
+type Args = {
+	value: PropValue;
+};
 
 export function registerRepeaterInjections() {
+	backgroundOverlayRepeaterInjections();
+	boxShadowRepeaterInjections();
+	transitionsRepeaterInjections();
+}
+
+const backgroundOverlayRepeaterInjections = () => {
 	injectIntoRepeaterItemIcon( {
 		id: 'color-variables-background-icon',
 		component: BackgroundRepeaterColorIndicator,
-		condition: ( { value: prop }: { value: PropValue } ) => {
-			return hasAssignedColorVariable( backgroundColorOverlayPropTypeUtil.extract( prop )?.color );
+		condition: ( { value }: Args ) => {
+			return hasAssignedColorVariable( backgroundColorOverlayPropTypeUtil.extract( value )?.color );
 		},
 	} );
 
+	injectIntoRepeaterItemLabel( {
+		id: 'color-variables-label',
+		component: BackgroundRepeaterLabel,
+		condition: ( { value }: Args ) => {
+			return hasAssignedColorVariable( backgroundColorOverlayPropTypeUtil.extract( value )?.color );
+		},
+	} );
+};
+
+const boxShadowRepeaterInjections = () => {
 	injectIntoRepeaterItemIcon( {
-		id: 'color-variables-icon',
+		id: 'color-variables-box-shadow-icon',
 		component: BoxShadowRepeaterColorIndicator,
-		condition: ( { value: prop }: { value: PropValue } ) => {
-			return hasAssignedColorVariable( shadowPropTypeUtil.extract( prop )?.color );
+		condition: ( { value }: Args ) => {
+			return hasAssignedColorVariable( shadowPropTypeUtil.extract( value )?.color );
 		},
 	} );
+};
 
+const transitionsRepeaterInjections = () => {
 	injectIntoRepeaterItemLabel( {
-		id: 'color-variables-label',
-		component: BackgroundRepeaterLabel,
-		condition: ( { value: prop }: { value: PropValue } ) => {
-			return hasAssignedColorVariable( backgroundColorOverlayPropTypeUtil.extract( prop )?.color );
+		id: 'transition-size-variables-label',
+		component: TransitionsSizeVariableLabel,
+		condition: ( { value }: Args ) => {
+			return hasAssignedSizeVariable( selectionSizePropTypeUtil.extract( value )?.size );
 		},
 	} );
-}
+};
+
+const hasAssignedSizeVariable = ( value: PropValue ): boolean => {
+	if ( sizeVariablePropTypeUtil.isValid( value ) ) {
+		return true;
+	}
+
+	if ( customSizeVariablePropTypeUtil.isValid( value ) ) {
+		return true;
+	}
+
+	return false;
+};
 
-const hasAssignedColorVariable = ( propValue: PropValue ): boolean => {
-	return !! colorVariablePropTypeUtil.isValid( propValue );
+const hasAssignedColorVariable = ( value: PropValue ): boolean => {
+	return !! colorVariablePropTypeUtil.isValid( value );
 };