@elementor/editor-controls 3.32.0-74 → 3.32.0-75

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-74",
+  "version": "3.32.0-75",
   "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-74",
-    "@elementor/editor-elements": "3.32.0-74",
-    "@elementor/editor-props": "3.32.0-74",
-    "@elementor/editor-responsive": "3.32.0-74",
-    "@elementor/editor-ui": "3.32.0-74",
-    "@elementor/editor-v1-adapters": "3.32.0-74",
-    "@elementor/env": "3.32.0-74",
-    "@elementor/http-client": "3.32.0-74",
+    "@elementor/editor-current-user": "3.32.0-75",
+    "@elementor/editor-elements": "3.32.0-75",
+    "@elementor/editor-props": "3.32.0-75",
+    "@elementor/editor-responsive": "3.32.0-75",
+    "@elementor/editor-ui": "3.32.0-75",
+    "@elementor/editor-v1-adapters": "3.32.0-75",
+    "@elementor/env": "3.32.0-75",
+    "@elementor/http-client": "3.32.0-75",
     "@elementor/icons": "^1.51.1",
-    "@elementor/locations": "3.32.0-74",
-    "@elementor/query": "3.32.0-74",
-    "@elementor/session": "3.32.0-74",
+    "@elementor/locations": "3.32.0-75",
+    "@elementor/query": "3.32.0-75",
+    "@elementor/session": "3.32.0-75",
     "@elementor/ui": "1.36.8",
-    "@elementor/utils": "3.32.0-74",
-    "@elementor/wp-media": "3.32.0-74",
+    "@elementor/utils": "3.32.0-75",
+    "@elementor/wp-media": "3.32.0-75",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0"
   },

package/src/components/unstable-repeater/actions/tooltip-add-item-action.tsx

@@ -26,7 +26,7 @@ export const TooltipAddItemAction = ( {
 
 	return (
 		<ConditionalToolTip content={ tooltipContent } enable={ enableTooltip }>
-			<Box sx={ { ml: 'auto', cursor: disabled ? 'not-allowed' : 'pointer' } }>
+			<Box component="span" sx={ { cursor: disabled ? 'not-allowed' : 'pointer' } }>
 				<IconButton
 					size={ SIZE }
 					disabled={ disabled }

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

@@ -4,31 +4,24 @@ import { Box, Stack, Typography } from '@elementor/ui';
 import { useBoundProp } from '../../../bound-prop-context/use-bound-prop';
 import { ControlAdornments } from '../../../control-adornments/control-adornments';
 import { SlotChildren } from '../../../control-replacements';
-import { TransformBaseControl } from '../../../controls/transform-control/transform-base-control';
 import { TooltipAddItemAction } from '../actions/tooltip-add-item-action';
 import { RepeaterHeaderActionsSlot } from '../locations';
 
-export const Header = ( { label, children }: React.PropsWithChildren< { label: string } > ) => {
+export const Header = React.forwardRef( ( { label, children }: React.PropsWithChildren< { label: string } >, ref ) => {
 	const { value } = useBoundProp();
 
 	return (
-		<Stack
-			direction="row"
-			justifyContent="start"
-			alignItems="center"
-			gap={ 1 }
-			sx={ { marginInlineEnd: -0.75, py: 0.25 } }
-		>
-			<Typography component="label" variant="caption" color="text.secondary" sx={ { lineHeight: 1 } }>
-				{ label }
-			</Typography>
-			<ControlAdornments />
-			<RepeaterHeaderActionsSlot value={ value } />
-			<Box sx={ { ml: 'auto' } }>
-				<SlotChildren whitelist={ [ TransformBaseControl, TooltipAddItemAction ] as React.FC[] } sorted>
-					{ children }
-				</SlotChildren>
+		<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>
 	);
-};
+} );

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

@@ -1,53 +1,57 @@
 import * as React from 'react';
-import { useRef } from 'react';
 import { PopoverHeader } from '@elementor/editor-ui';
 import { AdjustmentsIcon } from '@elementor/icons';
-import { bindPopover, bindTrigger, Divider, IconButton, Popover, usePopupState } from '@elementor/ui';
+import { bindPopover, Box, Divider, Popover, type PopupState } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { PropKeyProvider } from '../../bound-prop-context';
+import { PopoverContent } from '../../components/popover-content';
 import { ChildrenPerspectiveControl } from './transform-base-controls/children-perspective-control';
 import { TransformOriginControl } from './transform-base-controls/transform-origin-control';
 
 const SIZE = 'tiny';
 
-export const TransformBaseControl = ( { anchorRef }: { anchorRef: React.RefObject< HTMLDivElement | null > } ) => {
-	const rowRef = useRef< HTMLDivElement >( null );
-	const popupState = usePopupState( { variant: 'popover' } );
+export const TransformBaseControl = ( {
+	popupState,
+	anchorRef,
+}: {
+	popupState: PopupState;
+	anchorRef: React.RefObject< HTMLDivElement | null >;
+} ) => {
 	const popupProps = bindPopover( {
 		...popupState,
 		anchorEl: anchorRef.current ?? undefined,
 	} );
 
 	return (
-		<>
-			<IconButton
-				size={ SIZE }
-				aria-label={ __( 'Base Transform', 'elementor' ) }
-				{ ...bindTrigger( popupState ) }
-			>
-				<AdjustmentsIcon fontSize={ SIZE } />
-			</IconButton>
-			<Popover
-				disablePortal
-				slotProps={ {
-					paper: {
-						sx: {
-							width: anchorRef.current?.offsetWidth + 'px',
-						},
+		<Popover
+			disablePortal
+			anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
+			slotProps={ {
+				paper: {
+					sx: {
+						width: ( anchorRef.current?.offsetWidth || 0 ) - 6 + 'px',
+						mt: 0.5,
 					},
-				} }
-				{ ...popupProps }
-			>
-				<PopoverHeader
-					title={ __( 'Base Transform', 'elementor' ) }
-					onClose={ popupState.close }
-					icon={ <AdjustmentsIcon fontSize={ SIZE } /> }
-				/>
-				<Divider />
-				<TransformOriginControl rowRef={ rowRef } />
-				<Divider />
-				<ChildrenPerspectiveControl rowRef={ rowRef } />
-			</Popover>
-		</>
+				},
+			} }
+			{ ...popupProps }
+		>
+			<PopoverHeader
+				title={ __( 'Base Transform', 'elementor' ) }
+				onClose={ popupState.close }
+				icon={ <AdjustmentsIcon fontSize={ SIZE } /> }
+			/>
+			<Divider />
+			<PopoverContent sx={ { px: 2, py: 1.5 } }>
+				<PropKeyProvider bind={ 'transform-origin' }>
+					<TransformOriginControl />
+				</PropKeyProvider>
+				<Box sx={ { my: 0.5 } }>
+					<Divider />
+				</Box>
+				<ChildrenPerspectiveControl />
+			</PopoverContent>
+		</Popover>
 	);
 };

package/src/controls/transform-control/transform-base-controls/children-perspective-control.tsx

@@ -1,78 +1,88 @@
 import * as React from 'react';
-import { sizePropTypeUtil } from '@elementor/editor-props';
-import { Divider, Grid, Stack } from '@elementor/ui';
+import { perspectiveOriginPropTypeUtil } from '@elementor/editor-props';
+import { Grid, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
 import { ControlFormLabel } from '../../../components/control-form-label';
-import { ControlLabel } from '../../../components/control-label';
-import { lengthUnits } from '../../../utils/size-control';
+import { PopoverGridContainer } from '../../../components/popover-grid-container';
+import { type LengthUnit } from '../../../utils/size-control';
 import { SizeControl } from '../../size-control';
 
-const ORIGIN_UNITS = [ 'px', '%', 'em', 'rem' ] as ( 'px' | '%' | 'em' | 'rem' )[];
+type FieldProps = {
+	label: string;
+	bind: string;
+	units: LengthUnit[];
+};
 
-const CHILDREN_PERSPECTIVE_FIELDS = [
-	{
-		label: __( 'Perspective', 'elementor' ),
-		bindValue: 'perspective',
-		units: lengthUnits,
-	},
+const ORIGIN_UNITS: LengthUnit[] = [ 'px', '%', 'em', 'rem' ];
+
+const PERSPECTIVE_CONTROL_FIELD: FieldProps = {
+	label: __( 'Perspective', 'elementor' ),
+	bind: 'perspective',
+	units: [ 'px', 'em', 'rem', 'vw', 'vh' ],
+};
+
+const CHILDREN_PERSPECTIVE_FIELDS: FieldProps[] = [
 	{
 		label: __( 'Origin X', 'elementor' ),
-		bindValue: 'perspective-origin-x',
+		bind: 'x',
 		units: ORIGIN_UNITS,
 	},
 	{
 		label: __( 'Origin Y', 'elementor' ),
-		bindValue: 'perspective-origin-y',
+		bind: 'y',
 		units: ORIGIN_UNITS,
 	},
 ] as const;
 
-export const ChildrenPerspectiveControl = ( { rowRef }: { rowRef: React.RefObject< HTMLDivElement > } ) => {
+export const ChildrenPerspectiveControl = () => {
 	return (
 		<Stack direction="column" spacing={ 1.5 }>
-			<ControlFormLabel sx={ { pt: 1.5, pl: 1.5 } }>
-				{ __( 'Children perspective', 'elementor' ) }
-			</ControlFormLabel>
-			<Grid container spacing={ 1.5 } ref={ rowRef }>
-				{ CHILDREN_PERSPECTIVE_FIELDS.map( ( control ) => (
-					<ControlFields control={ control } rowRef={ rowRef } key={ control.bindValue } />
-				) ) }
-				<Divider sx={ { py: 3 } } />
-			</Grid>
+			<ControlFormLabel>{ __( 'Children perspective', 'elementor' ) }</ControlFormLabel>
+			<PerspectiveControl />
+			<PerspectiveOriginControl />
 		</Stack>
 	);
 };
 
-const ControlFields = ( {
-	control,
-	rowRef,
-}: {
-	control: ( typeof CHILDREN_PERSPECTIVE_FIELDS )[ number ];
-	rowRef: React.RefObject< HTMLDivElement >;
-} ) => {
-	const context = useBoundProp( sizePropTypeUtil );
+const PerspectiveControl = () => (
+	<PropKeyProvider bind={ 'perspective' }>
+		<ControlFields control={ PERSPECTIVE_CONTROL_FIELD } key={ PERSPECTIVE_CONTROL_FIELD.bind } />
+	</PropKeyProvider>
+);
+
+const PerspectiveOriginControl = () => (
+	<PropKeyProvider bind={ 'perspective-origin' }>
+		<PerspectiveOriginControlProvider />
+	</PropKeyProvider>
+);
+
+const PerspectiveOriginControlProvider = () => {
+	const context = useBoundProp( perspectiveOriginPropTypeUtil );
 
 	return (
 		<PropProvider { ...context }>
-			<PropKeyProvider bind={ control.bindValue }>
-				<Grid item xs={ 12 }>
-					<Grid container spacing={ 1 } alignItems="center">
-						<Grid item xs={ 6 }>
-							<ControlLabel>{ control.label }</ControlLabel>
-						</Grid>
-						<Grid item xs={ 6 } sx={ { pr: 3 } }>
-							<SizeControl
-								variant="length"
-								units={ [ ...control.units ] }
-								anchorRef={ rowRef }
-								disableCustom
-							/>
-						</Grid>
-					</Grid>
-				</Grid>
-			</PropKeyProvider>
+			{ CHILDREN_PERSPECTIVE_FIELDS.map( ( control ) => (
+				<PropKeyProvider bind={ control.bind } key={ control.bind }>
+					<ControlFields control={ control } />
+				</PropKeyProvider>
+			) ) }
 		</PropProvider>
 	);
 };
+
+const ControlFields = ( { control }: { control: FieldProps } ) => {
+	const rowRef = React.useRef< HTMLDivElement >( null );
+
+	return (
+		<PopoverGridContainer ref={ rowRef }>
+			<Grid item xs={ 6 }>
+				<ControlFormLabel>{ control.label }</ControlFormLabel>
+			</Grid>
+			<Grid item xs={ 6 }>
+				<SizeControl variant="length" units={ control.units } anchorRef={ rowRef } disableCustom />
+			</Grid>
+		</PopoverGridContainer>
+	);
+};

package/src/controls/transform-control/transform-base-controls/transform-origin-control.tsx

@@ -1,69 +1,61 @@
 import * as React from 'react';
-import { sizePropTypeUtil } from '@elementor/editor-props';
-import { Divider, Grid, Stack } from '@elementor/ui';
+import { transformOriginPropTypeUtil } from '@elementor/editor-props';
+import { Grid, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
 import { ControlFormLabel } from '../../../components/control-form-label';
-import { ControlLabel } from '../../../components/control-label';
+import { PopoverGridContainer } from '../../../components/popover-grid-container';
+import { type LengthUnit } from '../../../utils/size-control';
 import { SizeControl } from '../../size-control';
 
-const TRANSFORM_ORIGIN_UNITS = [ 'px', '%', 'em', 'rem' ] as ( 'px' | '%' | 'em' | 'rem' )[];
+const TRANSFORM_ORIGIN_UNITS: LengthUnit[] = [ 'px', '%', 'em', 'rem' ];
+const TRANSFORM_ORIGIN_UNITS_Z_AXIS = TRANSFORM_ORIGIN_UNITS.filter( ( unit ) => unit !== '%' );
 
 const TRANSFORM_ORIGIN_FIELDS = [
 	{
 		label: __( 'Origin X', 'elementor' ),
-		bindValue: 'x',
+		bind: 'x',
 		units: TRANSFORM_ORIGIN_UNITS,
 	},
 	{
 		label: __( 'Origin Y', 'elementor' ),
-		bindValue: 'y',
+		bind: 'y',
 		units: TRANSFORM_ORIGIN_UNITS,
 	},
 	{
 		label: __( 'Origin Z', 'elementor' ),
-		bindValue: 'z',
-		units: TRANSFORM_ORIGIN_UNITS.filter( ( unit ) => unit !== '%' ),
+		bind: 'z',
+		units: TRANSFORM_ORIGIN_UNITS_Z_AXIS,
 	},
 ];
 
-export const TransformOriginControl = ( { rowRef }: { rowRef: React.RefObject< HTMLDivElement > } ) => {
+export const TransformOriginControl = () => {
 	return (
 		<Stack direction="column" spacing={ 1.5 }>
-			<ControlFormLabel sx={ { pt: 1.5, pl: 1.5 } }>{ __( 'Transform', 'elementor' ) }</ControlFormLabel>
-			<Grid container spacing={ 1.5 } ref={ rowRef }>
-				{ TRANSFORM_ORIGIN_FIELDS.map( ( control ) => (
-					<ControlFields control={ control } rowRef={ rowRef } key={ control.bindValue } />
-				) ) }
-				<Divider sx={ { py: 3 } } />
-			</Grid>
+			<ControlFormLabel>{ __( 'Transform', 'elementor' ) }</ControlFormLabel>
+			{ TRANSFORM_ORIGIN_FIELDS.map( ( control ) => (
+				<ControlFields control={ control } key={ control.bind } />
+			) ) }
 		</Stack>
 	);
 };
 
-const ControlFields = ( {
-	control,
-	rowRef,
-}: {
-	control: ( typeof TRANSFORM_ORIGIN_FIELDS )[ number ];
-	rowRef: React.RefObject< HTMLDivElement >;
-} ) => {
-	const context = useBoundProp( sizePropTypeUtil );
+const ControlFields = ( { control }: { control: ( typeof TRANSFORM_ORIGIN_FIELDS )[ number ] } ) => {
+	const context = useBoundProp( transformOriginPropTypeUtil );
+	const rowRef = React.useRef< HTMLDivElement >( null );
 
 	return (
 		<PropProvider { ...context }>
-			<PropKeyProvider bind={ control.bindValue }>
-				<Grid item xs={ 12 }>
-					<Grid container spacing={ 1 } alignItems="center">
-						<Grid item xs={ 6 }>
-							<ControlLabel>{ control.label }</ControlLabel>
-						</Grid>
-						<Grid item xs={ 6 } sx={ { pr: 3 } }>
-							<SizeControl variant="length" units={ control.units } anchorRef={ rowRef } disableCustom />
-						</Grid>
+			<PropKeyProvider bind={ control.bind }>
+				<PopoverGridContainer ref={ rowRef }>
+					<Grid item xs={ 6 }>
+						<ControlFormLabel>{ control.label }</ControlFormLabel>
 					</Grid>
-				</Grid>
+					<Grid item xs={ 6 }>
+						<SizeControl variant="length" units={ control.units } anchorRef={ rowRef } disableCustom />
+					</Grid>
+				</PopoverGridContainer>
 			</PropKeyProvider>
 		</PropProvider>
 	);

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { useRef } from 'react';
 import { transformFunctionsPropTypeUtil, transformPropTypeUtil } from '@elementor/editor-props';
-import { InfoCircleFilledIcon } from '@elementor/icons';
-import { Box, Typography } from '@elementor/ui';
+import { AdjustmentsIcon, InfoCircleFilledIcon } from '@elementor/icons';
+import { bindTrigger, Box, IconButton, type PopupState, Typography, usePopupState } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../bound-prop-context';
@@ -15,19 +16,34 @@ import {
 import { DisableItemAction } from '../../components/unstable-repeater/actions/disable-item-action';
 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 { createControl } from '../../create-control';
 import { initialRotateValue, initialScaleValue, initialSkewValue, initialTransformValue } from './initial-values';
+import { TransformBaseControl } from './transform-base-control';
 import { TransformContent } from './transform-content';
 import { TransformIcon } from './transform-icon';
 import { TransformLabel } from './transform-label';
 
+const SIZE = 'tiny';
+
 export const TransformRepeaterControl = createControl( () => {
 	const context = useBoundProp( transformPropTypeUtil );
+	const headerRef = useRef< HTMLDivElement >( null );
+	const popupState = usePopupState( { variant: 'popover' } );
+
+	const repeaterBindKey = 'transform-functions';
+
+	injectIntoRepeaterHeaderActions( {
+		id: 'transform-base-control',
+		component: () => <TransformBasePopoverTrigger popupState={ popupState } repeaterBindKey={ repeaterBindKey } />,
+		options: { overwrite: true },
+	} );
 
 	return (
 		<PropProvider { ...context }>
-			<PropKeyProvider bind="transform-functions">
-				<Repeater />
+			<TransformBaseControl popupState={ popupState } anchorRef={ headerRef } />
+			<PropKeyProvider bind={ repeaterBindKey }>
+				<Repeater headerRef={ headerRef } />
 			</PropKeyProvider>
 		</PropProvider>
 	);
@@ -46,7 +62,7 @@ const ToolTip = (
 	</Box>
 );
 
-const Repeater = () => {
+const Repeater = ( { headerRef }: { headerRef: React.RefObject< HTMLDivElement > } ) => {
 	const transformFunctionsContext = useBoundProp( transformFunctionsPropTypeUtil );
 	const availableValues = [ initialTransformValue, initialScaleValue, initialRotateValue, initialSkewValue ];
 	const { value: transformValues } = transformFunctionsContext;
@@ -63,7 +79,7 @@ const Repeater = () => {
 				initial={ getInitialValue() ?? initialTransformValue }
 				propTypeUtil={ transformFunctionsPropTypeUtil }
 			>
-				<Header label={ __( 'Transform', 'elementor' ) }>
+				<Header label={ __( 'Transform', 'elementor' ) } ref={ headerRef }>
 					<TooltipAddItemAction
 						disabled={ shouldDisableAddItem }
 						tooltipContent={ ToolTip }
@@ -81,3 +97,19 @@ const Repeater = () => {
 		</PropProvider>
 	);
 };
+
+const TransformBasePopoverTrigger = ( {
+	popupState,
+	repeaterBindKey,
+}: {
+	popupState: PopupState;
+	repeaterBindKey: string;
+} ) => {
+	const { bind } = useBoundProp();
+
+	return bind !== repeaterBindKey ? null : (
+		<IconButton size={ SIZE } aria-label={ __( 'Base Transform', 'elementor' ) } { ...bindTrigger( popupState ) }>
+			<AdjustmentsIcon fontSize={ SIZE } />
+		</IconButton>
+	);
+};