@elementor/editor-variables 4.1.0-785 → 4.1.0-786

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "4.1.0-785",
+  "version": "4.1.0-786",
   "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-785",
-    "@elementor/editor-canvas": "4.1.0-785",
-    "@elementor/editor-controls": "4.1.0-785",
-    "@elementor/editor-current-user": "4.1.0-785",
-    "@elementor/editor-mcp": "4.1.0-785",
-    "@elementor/editor-panels": "4.1.0-785",
-    "@elementor/editor-props": "4.1.0-785",
-    "@elementor/editor-ui": "4.1.0-785",
-    "@elementor/editor-v1-adapters": "4.1.0-785",
-    "@elementor/menus": "4.1.0-785",
-    "@elementor/http-client": "4.1.0-785",
+    "@elementor/editor": "4.1.0-786",
+    "@elementor/editor-canvas": "4.1.0-786",
+    "@elementor/editor-controls": "4.1.0-786",
+    "@elementor/editor-current-user": "4.1.0-786",
+    "@elementor/editor-mcp": "4.1.0-786",
+    "@elementor/editor-panels": "4.1.0-786",
+    "@elementor/editor-props": "4.1.0-786",
+    "@elementor/editor-ui": "4.1.0-786",
+    "@elementor/editor-v1-adapters": "4.1.0-786",
+    "@elementor/menus": "4.1.0-786",
+    "@elementor/http-client": "4.1.0-786",
     "@elementor/icons": "^1.72.0",
-    "@elementor/events": "4.1.0-785",
-    "@elementor/schema": "4.1.0-785",
+    "@elementor/events": "4.1.0-786",
+    "@elementor/schema": "4.1.0-786",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.1.0-785",
+    "@elementor/utils": "4.1.0-786",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

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

@@ -6,9 +6,11 @@ import {
 	type PropValue,
 	selectionSizePropTypeUtil,
 	type SelectionSizePropValue,
+	shadowPropTypeUtil,
 } from '@elementor/editor-props';
 
-import { useVariable } from '../hooks/use-prop-variables';
+import { getVariable } from '../hooks/use-prop-variables';
+import { sizeValue } from '../utils/size-value';
 import { ColorIndicator } from './ui/color-indicator';
 
 type Props = {
@@ -18,7 +20,7 @@ type Props = {
 const useColorVariable = ( value: BackgroundColorOverlayPropValue | BoxShadowPropValue ) => {
 	const variableId = value?.value?.color?.value;
 
-	return useVariable( variableId || '' );
+	return getVariable( variableId || '' );
 };
 
 export const BackgroundRepeaterColorIndicator = ( { value }: Props ) => {
@@ -39,11 +41,32 @@ export const BoxShadowRepeaterColorIndicator = ( { value }: Props ) => {
 	return <ColorIndicator component="span" size="inherit" value={ colorVariable?.value } />;
 };
 
+export const BoxShadowRepeaterLabel = ( { value }: Props ) => {
+	const shadowPropValue = shadowPropTypeUtil.extract( value ) || {};
+
+	const labels: string[] = [];
+
+	for ( const key of [ 'hOffset', 'vOffset', 'blur', 'spread' ] ) {
+		const rendered = sizeValue( shadowPropValue[ key as keyof typeof shadowPropValue ] );
+		if ( rendered ) {
+			labels.push( rendered );
+		}
+	}
+
+	const positionLabel = shadowPropValue.position?.value || 'outset';
+
+	return (
+		<span style={ { textTransform: 'capitalize' } }>
+			{ positionLabel }: { labels.join( ' ' ) }
+		</span>
+	);
+};
+
 export const TransitionsSizeVariableLabel = ( { value: prop }: Props ) => {
 	let label = '';
 
 	const variableId = ( prop as SelectionSizePropValue )?.value?.size?.value || '';
-	const variable = useVariable( variableId );
+	const variable = getVariable( variableId );
 
 	if ( variable && selectionSizePropTypeUtil.isValid( prop ) ) {
 		const selection = ( prop.value?.selection as KeyValuePropValue )?.value?.key?.value;

package/src/hooks/use-prop-variables.ts

@@ -23,7 +23,15 @@ export const hasVariable = ( key: string ) => {
 	return getVariables()[ key ] !== undefined;
 };
 
+/**
+ * @param      key
+ * @deprecated Use getVariable instead
+ */
 export const useVariable = ( key: string ) => {
+	return getVariable( key );
+};
+
+export function getVariable( key: string ) {
 	const variables = getVariables();
 
 	if ( ! variables?.[ key ] ) {
@@ -34,13 +42,14 @@ export const useVariable = ( key: string ) => {
 		...variables[ key ],
 		key,
 	};
-};
+}
 
 export const useFilteredVariables = ( searchValue: string, propTypeKey: string ) => {
 	const baseVariables = usePropVariables( propTypeKey );
 
 	const typeFilteredVariables = useVariableSelectionFilter( baseVariables );
 	const searchFilteredVariables = filterBySearch( typeFilteredVariables, searchValue );
+
 	const sortedVariables = searchFilteredVariables.sort( ( a, b ) => {
 		const orderA = a.order ?? Number.MAX_SAFE_INTEGER;
 		const orderB = b.order ?? Number.MAX_SAFE_INTEGER;

package/src/repeater-injections.ts

@@ -10,6 +10,7 @@ import {
 	BackgroundRepeaterColorIndicator,
 	BackgroundRepeaterLabel,
 	BoxShadowRepeaterColorIndicator,
+	BoxShadowRepeaterLabel,
 	TransitionsSizeVariableLabel,
 } from './components/variables-repeater-item-slot';
 import { colorVariablePropTypeUtil, customSizeVariablePropTypeUtil, sizeVariablePropTypeUtil } from './prop-types';
@@ -47,7 +48,23 @@ const boxShadowRepeaterInjections = () => {
 		id: 'color-variables-box-shadow-icon',
 		component: BoxShadowRepeaterColorIndicator,
 		condition: ( { value }: Args ) => {
-			return hasAssignedColorVariable( shadowPropTypeUtil.extract( value )?.color );
+			const { color } = shadowPropTypeUtil.extract( value ) || {};
+			return hasAssignedColorVariable( color );
+		},
+	} );
+
+	injectIntoRepeaterItemLabel( {
+		id: 'color-variables-box-shadow-label',
+		component: BoxShadowRepeaterLabel,
+		condition: ( { value }: Args ) => {
+			const { hOffset, vOffset, blur, spread } = shadowPropTypeUtil.extract( value ) || {};
+
+			return (
+				hasAssignedSizeVariable( hOffset ) ||
+				hasAssignedSizeVariable( vOffset ) ||
+				hasAssignedSizeVariable( blur ) ||
+				hasAssignedSizeVariable( spread )
+			);
 		},
 	} );
 };

package/src/utils/size-value.ts

@@ -0,0 +1,30 @@
+import { type PropValue, sizePropTypeUtil } from '@elementor/editor-props';
+
+import { getVariable } from '../hooks/use-prop-variables';
+import { customSizeVariablePropTypeUtil, sizeVariablePropTypeUtil } from '../prop-types';
+
+const DEFAULT_UNIT = 'px';
+const CUSTOM_SIZE_LABEL = 'fx';
+
+export function sizeValue( value: PropValue ) {
+	if ( sizeVariablePropTypeUtil.isValid( value ) || customSizeVariablePropTypeUtil.isValid( value ) ) {
+		const variable = getVariable( value?.value );
+		return variable?.value;
+	}
+
+	if ( sizePropTypeUtil.isValid( value ) ) {
+		const { size, unit } = value.value;
+
+		if ( 'custom' !== unit ) {
+			return `${ size ?? 0 }${ unit ?? DEFAULT_UNIT }`;
+		}
+
+		if ( ! size ) {
+			return CUSTOM_SIZE_LABEL;
+		}
+
+		return size;
+	}
+
+	return '';
+}