@elementor/editor-controls 3.32.0-73 → 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-73",
+  "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-73",
-    "@elementor/editor-elements": "3.32.0-73",
-    "@elementor/editor-props": "3.32.0-73",
-    "@elementor/editor-responsive": "3.32.0-73",
-    "@elementor/editor-ui": "3.32.0-73",
-    "@elementor/editor-v1-adapters": "3.32.0-73",
-    "@elementor/env": "3.32.0-73",
-    "@elementor/http-client": "3.32.0-73",
+    "@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-73",
-    "@elementor/query": "3.32.0-73",
-    "@elementor/session": "3.32.0-73",
+    "@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-73",
-    "@elementor/wp-media": "3.32.0-73",
+    "@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/gap-control.tsx

@@ -8,10 +8,9 @@ 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 { createControl } from '../create-control';
 import { SizeControl } from './size-control';
 
-export const GapControl = createControl( ( { label }: { label: string } ) => {
+export const GapControl = ( { label }: { label: string } ) => {
 	const {
 		value: directionValue,
 		setValue: setDirectionValue,
@@ -87,7 +86,7 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 			</Stack>
 		</PropProvider>
 	);
-} );
+};
 
 const Control = ( {
 	bind,

package/src/controls/linked-dimensions-control.tsx

@@ -9,120 +9,117 @@ import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-conte
 import { ControlFormLabel } from '../components/control-form-label';
 import { ControlLabel } from '../components/control-label';
 import { StyledToggleButton } from '../components/control-toggle-button-group';
-import { createControl } from '../create-control';
 import { type ExtendedOption } from '../utils/size-control';
 import { SizeControl } from './size-control';
 
-export const LinkedDimensionsControl = createControl(
-	( {
-		label,
-		isSiteRtl = false,
-		extendedOptions,
-		min,
-	}: {
-		label: string;
-		isSiteRtl?: boolean;
-		extendedOptions?: ExtendedOption[];
-		min?: number;
-	} ) => {
-		const {
-			value: sizeValue,
-			setValue: setSizeValue,
-			disabled: sizeDisabled,
-			placeholder: sizePlaceholder,
-		} = useBoundProp( sizePropTypeUtil );
-		const gridRowRefs: RefObject< HTMLDivElement >[] = [ useRef( null ), useRef( null ) ];
-
-		const {
-			value: dimensionsValue,
-			setValue: setDimensionsValue,
-			propType,
-			placeholder: dimensionsPlaceholder,
-			disabled: dimensionsDisabled,
-		} = useBoundProp( dimensionsPropTypeUtil );
-
-		const hasUserValues = !! ( dimensionsValue || sizeValue );
-		const hasPlaceholders = !! ( sizePlaceholder || dimensionsPlaceholder );
-
-		const isLinked =
-			( ! hasUserValues && ! hasPlaceholders ) || ( hasPlaceholders ? !! sizePlaceholder : !! sizeValue );
-		const onLinkToggle = () => {
-			if ( ! isLinked ) {
-				setSizeValue( dimensionsValue[ 'block-start' ]?.value ?? null );
-				return;
-			}
-
-			const value = sizeValue ? sizePropTypeUtil.create( sizeValue ) : null;
-
-			setDimensionsValue( {
-				'block-start': value,
-				'block-end': value,
-				'inline-start': value,
-				'inline-end': value,
-			} );
-		};
-
-		const tooltipLabel = label.toLowerCase();
-
-		const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
-		// translators: %s: Tooltip title.
-		const linkedLabel = __( 'Link %s', 'elementor' ).replace( '%s', tooltipLabel );
-		// translators: %s: Tooltip title.
-		const unlinkedLabel = __( 'Unlink %s', 'elementor' ).replace( '%s', tooltipLabel );
-
-		const disabled = sizeDisabled || dimensionsDisabled;
-
-		return (
-			<PropProvider
-				propType={ propType }
-				value={ dimensionsValue }
-				setValue={ setDimensionsValue }
-				placeholder={ dimensionsPlaceholder }
-				isDisabled={ () => disabled }
-			>
-				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
-					<ControlFormLabel>{ label }</ControlFormLabel>
-					<Tooltip title={ isLinked ? unlinkedLabel : linkedLabel } placement="top">
-						<StyledToggleButton
-							aria-label={ isLinked ? unlinkedLabel : linkedLabel }
-							size={ 'tiny' }
-							value={ 'check' }
-							selected={ isLinked }
-							sx={ { marginLeft: 'auto' } }
-							onChange={ onLinkToggle }
-							disabled={ disabled }
-							isPlaceholder={ hasPlaceholders }
-						>
-							<LinkedIcon fontSize={ 'tiny' } />
-						</StyledToggleButton>
-					</Tooltip>
-				</Stack>
+export const LinkedDimensionsControl = ( {
+	label,
+	isSiteRtl = false,
+	extendedOptions,
+	min,
+}: {
+	label: string;
+	isSiteRtl?: boolean;
+	extendedOptions?: ExtendedOption[];
+	min?: number;
+} ) => {
+	const {
+		value: sizeValue,
+		setValue: setSizeValue,
+		disabled: sizeDisabled,
+		placeholder: sizePlaceholder,
+	} = useBoundProp( sizePropTypeUtil );
+	const gridRowRefs: RefObject< HTMLDivElement >[] = [ useRef( null ), useRef( null ) ];
+
+	const {
+		value: dimensionsValue,
+		setValue: setDimensionsValue,
+		propType,
+		placeholder: dimensionsPlaceholder,
+		disabled: dimensionsDisabled,
+	} = useBoundProp( dimensionsPropTypeUtil );
+
+	const hasUserValues = !! ( dimensionsValue || sizeValue );
+	const hasPlaceholders = !! ( sizePlaceholder || dimensionsPlaceholder );
+
+	const isLinked =
+		( ! hasUserValues && ! hasPlaceholders ) || ( hasPlaceholders ? !! sizePlaceholder : !! sizeValue );
+	const onLinkToggle = () => {
+		if ( ! isLinked ) {
+			setSizeValue( dimensionsValue[ 'block-start' ]?.value ?? null );
+			return;
+		}
+
+		const value = sizeValue ? sizePropTypeUtil.create( sizeValue ) : null;
+
+		setDimensionsValue( {
+			'block-start': value,
+			'block-end': value,
+			'inline-start': value,
+			'inline-end': value,
+		} );
+	};
+
+	const tooltipLabel = label.toLowerCase();
+
+	const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
+	// translators: %s: Tooltip title.
+	const linkedLabel = __( 'Link %s', 'elementor' ).replace( '%s', tooltipLabel );
+	// translators: %s: Tooltip title.
+	const unlinkedLabel = __( 'Unlink %s', 'elementor' ).replace( '%s', tooltipLabel );
+
+	const disabled = sizeDisabled || dimensionsDisabled;
 
-				{ getCssDimensionProps( isSiteRtl ).map( ( row, index ) => (
-					<Stack direction="row" gap={ 2 } flexWrap="nowrap" key={ index } ref={ gridRowRefs[ index ] }>
-						{ row.map( ( { icon, ...props } ) => (
-							<Grid container gap={ 0.75 } alignItems="center" key={ props.bind }>
-								<Grid item xs={ 12 }>
-									<Label { ...props } />
-								</Grid>
-								<Grid item xs={ 12 }>
-									<Control
-										bind={ props.bind }
-										startIcon={ icon }
-										isLinked={ isLinked }
-										extendedOptions={ extendedOptions }
-										anchorRef={ gridRowRefs[ index ] }
-										min={ min }
-									/>
-								</Grid>
+	return (
+		<PropProvider
+			propType={ propType }
+			value={ dimensionsValue }
+			setValue={ setDimensionsValue }
+			placeholder={ dimensionsPlaceholder }
+			isDisabled={ () => disabled }
+		>
+			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
+				<ControlFormLabel>{ label }</ControlFormLabel>
+				<Tooltip title={ isLinked ? unlinkedLabel : linkedLabel } placement="top">
+					<StyledToggleButton
+						aria-label={ isLinked ? unlinkedLabel : linkedLabel }
+						size={ 'tiny' }
+						value={ 'check' }
+						selected={ isLinked }
+						sx={ { marginLeft: 'auto' } }
+						onChange={ onLinkToggle }
+						disabled={ disabled }
+						isPlaceholder={ hasPlaceholders }
+					>
+						<LinkedIcon fontSize={ 'tiny' } />
+					</StyledToggleButton>
+				</Tooltip>
+			</Stack>
+
+			{ getCssDimensionProps( isSiteRtl ).map( ( row, index ) => (
+				<Stack direction="row" gap={ 2 } flexWrap="nowrap" key={ index } ref={ gridRowRefs[ index ] }>
+					{ row.map( ( { icon, ...props } ) => (
+						<Grid container gap={ 0.75 } alignItems="center" key={ props.bind }>
+							<Grid item xs={ 12 }>
+								<Label { ...props } />
 							</Grid>
-						) ) }
-					</Stack>
-				) ) }
-			</PropProvider>
-		);
-	}
-);
+							<Grid item xs={ 12 }>
+								<Control
+									bind={ props.bind }
+									startIcon={ icon }
+									isLinked={ isLinked }
+									extendedOptions={ extendedOptions }
+									anchorRef={ gridRowRefs[ index ] }
+									min={ min }
+								/>
+							</Grid>
+						</Grid>
+					) ) }
+				</Stack>
+			) ) }
+		</PropProvider>
+	);
+};
 
 const Control = ( {
 	bind,

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>
+	);
+};