@elementor/editor-controls 3.32.0-86 → 3.32.0-89

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "3.32.0-86",
+  "version": "3.32.0-89",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,21 +40,21 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "3.32.0-86",
-    "@elementor/editor-elements": "3.32.0-86",
-    "@elementor/editor-props": "3.32.0-86",
-    "@elementor/editor-responsive": "3.32.0-86",
-    "@elementor/editor-ui": "3.32.0-86",
-    "@elementor/editor-v1-adapters": "3.32.0-86",
-    "@elementor/env": "3.32.0-86",
-    "@elementor/http-client": "3.32.0-86",
+    "@elementor/editor-current-user": "3.32.0-89",
+    "@elementor/editor-elements": "3.32.0-89",
+    "@elementor/editor-props": "3.32.0-89",
+    "@elementor/editor-responsive": "3.32.0-89",
+    "@elementor/editor-ui": "3.32.0-89",
+    "@elementor/editor-v1-adapters": "3.32.0-89",
+    "@elementor/env": "3.32.0-89",
+    "@elementor/http-client": "3.32.0-89",
     "@elementor/icons": "^1.51.1",
-    "@elementor/locations": "3.32.0-86",
-    "@elementor/query": "3.32.0-86",
-    "@elementor/session": "3.32.0-86",
+    "@elementor/locations": "3.32.0-89",
+    "@elementor/query": "3.32.0-89",
+    "@elementor/session": "3.32.0-89",
     "@elementor/ui": "1.36.8",
-    "@elementor/utils": "3.32.0-86",
-    "@elementor/wp-media": "3.32.0-86",
+    "@elementor/utils": "3.32.0-89",
+    "@elementor/wp-media": "3.32.0-89",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0"
   },

package/src/components/unstable-repeater/header/header.tsx

@@ -7,21 +7,39 @@ import { SlotChildren } from '../../../control-replacements';
 import { TooltipAddItemAction } from '../actions/tooltip-add-item-action';
 import { RepeaterHeaderActionsSlot } from '../locations';
 
-export const Header = React.forwardRef( ( { label, children }: React.PropsWithChildren< { label: string } >, ref ) => {
-	const { value } = useBoundProp();
+export const Header = React.forwardRef(
+	(
+		{
+			label,
+			children,
+			adornment: Adornment = ControlAdornments,
+		}: React.PropsWithChildren< {
+			label: string;
+			adornment?: React.FC;
+		} >,
+		ref
+	) => {
+		const { value } = useBoundProp();
 
-	return (
-		<Stack direction="row" alignItems="center" gap={ 1 } sx={ { marginInlineEnd: -0.75, py: 0.25 } } ref={ ref }>
-			<Box display="flex" alignItems="center" gap={ 1 } sx={ { flexGrow: 1 } }>
-				<Typography component="label" variant="caption" color="text.secondary" sx={ { lineHeight: 1 } }>
-					{ label }
-				</Typography>
-				<ControlAdornments />
-			</Box>
-			<RepeaterHeaderActionsSlot value={ value } />
-			<SlotChildren whitelist={ [ TooltipAddItemAction ] as React.FC[] } sorted>
-				{ children }
-			</SlotChildren>
-		</Stack>
-	);
-} );
+		return (
+			<Stack
+				direction="row"
+				alignItems="center"
+				gap={ 1 }
+				sx={ { marginInlineEnd: -0.75, py: 0.25 } }
+				ref={ ref }
+			>
+				<Box display="flex" alignItems="center" gap={ 1 } sx={ { flexGrow: 1 } }>
+					<Typography component="label" variant="caption" color="text.secondary" sx={ { lineHeight: 1 } }>
+						{ label }
+					</Typography>
+					<Adornment />
+				</Box>
+				<RepeaterHeaderActionsSlot value={ value } />
+				<SlotChildren whitelist={ [ TooltipAddItemAction ] as React.FC[] } sorted>
+					{ children }
+				</SlotChildren>
+			</Stack>
+		);
+	}
+);

package/src/control-adornments/control-adornments-context.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { type ComponentType, createContext, type PropsWithChildren, useContext } from 'react';
+import { type PropType } from '@elementor/editor-props';
 
 type ControlAdornmentsItems = Array< {
 	id: string;
-	Adornment: ComponentType;
+	Adornment: ComponentType< { customContext?: { path: string[]; propType: PropType } } >;
 } >;
 
 type ControlAdornmentsContext = {

package/src/control-adornments/control-adornments.tsx

@@ -1,8 +1,16 @@
 import * as React from 'react';
+import { type PropType } from '@elementor/editor-props';
 
 import { useControlAdornments } from './control-adornments-context';
 
-export function ControlAdornments() {
+export function ControlAdornments( {
+	customContext,
+}: {
+	customContext?: {
+		path: string[];
+		propType: PropType;
+	};
+} ) {
 	const items = useControlAdornments();
 
 	if ( items?.length === 0 ) {
@@ -12,7 +20,7 @@ export function ControlAdornments() {
 	return (
 		<>
 			{ items.map( ( { Adornment, id } ) => (
-				<Adornment key={ id } />
+				<Adornment key={ id } customContext={ customContext } />
 			) ) }
 		</>
 	);

package/src/controls/transform-control/transform-repeater-control.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRef } from 'react';
-import { transformFunctionsPropTypeUtil, transformPropTypeUtil } from '@elementor/editor-props';
+import { type PropType, transformFunctionsPropTypeUtil, transformPropTypeUtil } from '@elementor/editor-props';
 import { AdjustmentsIcon, InfoCircleFilledIcon } from '@elementor/icons';
 import { bindTrigger, Box, IconButton, type PopupState, Typography, usePopupState } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -17,6 +17,7 @@ import { DisableItemAction } from '../../components/unstable-repeater/actions/di
 import { RemoveItemAction } from '../../components/unstable-repeater/actions/remove-item-action';
 import { EditItemPopover } from '../../components/unstable-repeater/items/edit-item-popover';
 import { injectIntoRepeaterHeaderActions } from '../../components/unstable-repeater/locations';
+import { ControlAdornments } from '../../control-adornments/control-adornments';
 import { createControl } from '../../create-control';
 import { initialRotateValue, initialScaleValue, initialSkewValue, initialTransformValue } from './initial-values';
 import { TransformBaseControl } from './transform-base-control';
@@ -43,7 +44,7 @@ export const TransformRepeaterControl = createControl( () => {
 		<PropProvider { ...context }>
 			<TransformBaseControl popupState={ popupState } anchorRef={ headerRef } />
 			<PropKeyProvider bind={ repeaterBindKey }>
-				<Repeater headerRef={ headerRef } />
+				<Repeater headerRef={ headerRef } propType={ context.propType } />
 			</PropKeyProvider>
 		</PropProvider>
 	);
@@ -62,7 +63,7 @@ const ToolTip = (
 	</Box>
 );
 
-const Repeater = ( { headerRef }: { headerRef: React.RefObject< HTMLDivElement > } ) => {
+const Repeater = ( { headerRef, propType }: { headerRef: React.RefObject< HTMLDivElement >; propType: PropType } ) => {
 	const transformFunctionsContext = useBoundProp( transformFunctionsPropTypeUtil );
 	const availableValues = [ initialTransformValue, initialScaleValue, initialRotateValue, initialSkewValue ];
 	const { value: transformValues } = transformFunctionsContext;
@@ -79,7 +80,11 @@ const Repeater = ( { headerRef }: { headerRef: React.RefObject< HTMLDivElement >
 				initial={ getInitialValue() ?? initialTransformValue }
 				propTypeUtil={ transformFunctionsPropTypeUtil }
 			>
-				<Header label={ __( 'Transform', 'elementor' ) } ref={ headerRef }>
+				<Header
+					label={ __( 'Transform', 'elementor' ) }
+					adornment={ () => <ControlAdornments customContext={ { path: [ 'transform' ], propType } } /> }
+					ref={ headerRef }
+				>
 					<TooltipAddItemAction
 						disabled={ shouldDisableAddItem }
 						tooltipContent={ ToolTip }