@elementor/editor-controls 3.32.0-33 → 3.32.0-35

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

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

@@ -24,7 +24,7 @@ export const TooltipAddItemAction = ( {
 
 	return (
 		<ConditionalToolTip content={ tooltipContent } enable={ enableTooltip }>
-			<Box sx={ { ml: 'auto' } }>
+			<Box>
 				<IconButton
 					size={ SIZE }
 					disabled={ disabled }

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

@@ -4,6 +4,7 @@ import { 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';
 
@@ -16,7 +17,9 @@ export const Header = ( { label, children }: React.PropsWithChildren< { label: s
 				{ label }
 			</Typography>
 			<RepeaterHeaderActionsSlot value={ value } />
-			<SlotChildren whitelist={ [ TooltipAddItemAction ] as React.FC[] }>{ children }</SlotChildren>
+			<SlotChildren whitelist={ [ TransformBaseControl, TooltipAddItemAction ] as React.FC[] } sorted>
+				{ children }
+			</SlotChildren>
 			<ControlAdornments />
 		</Stack>
 	);

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

@@ -0,0 +1,50 @@
+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 { __ } from '@wordpress/i18n';
+
+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' } );
+	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',
+						},
+					},
+				} }
+				{ ...popupProps }
+			>
+				<PopoverHeader
+					title={ __( 'Base Transform', 'elementor' ) }
+					onClose={ popupState.close }
+					icon={ <AdjustmentsIcon fontSize={ SIZE } /> }
+				/>
+				<Divider />
+				<TransformOriginControl rowRef={ rowRef } />
+			</Popover>
+		</>
+	);
+};

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

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { sizePropTypeUtil } from '@elementor/editor-props';
+import { Divider, 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 { SizeControl } from '../../size-control';
+
+const TRANSFORM_ORIGIN_UNITS = [ 'px', '%', 'em', 'rem' ] as ( 'px' | '%' | 'em' | 'rem' )[];
+
+const TRANSFORM_ORIGIN_FIELDS = [
+	{
+		label: __( 'Origin X', 'elementor' ),
+		bindValue: 'x',
+		units: TRANSFORM_ORIGIN_UNITS,
+	},
+	{
+		label: __( 'Origin Y', 'elementor' ),
+		bindValue: 'y',
+		units: TRANSFORM_ORIGIN_UNITS,
+	},
+	{
+		label: __( 'Origin Z', 'elementor' ),
+		bindValue: 'z',
+		units: TRANSFORM_ORIGIN_UNITS.filter( ( unit ) => unit !== '%' ),
+	},
+];
+
+export const TransformOriginControl = ( { rowRef }: { rowRef: React.RefObject< HTMLDivElement > } ) => {
+	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>
+		</Stack>
+	);
+};
+
+const ControlFields = ( {
+	control,
+	rowRef,
+}: {
+	control: ( typeof TRANSFORM_ORIGIN_FIELDS )[ number ];
+	rowRef: React.RefObject< HTMLDivElement >;
+} ) => {
+	const context = useBoundProp( sizePropTypeUtil );
+
+	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>
+		</PropProvider>
+	);
+};

package/src/index.ts

@@ -25,6 +25,7 @@ export { RepeatableControl } from './controls/repeatable-control';
 export { KeyValueControl } from './controls/key-value-control';
 export { PositionControl } from './controls/position-control';
 export { TransformRepeaterControl } from './controls/transform-control/transform-repeater-control';
+export { TransformBaseControl } from './controls/transform-control/transform-base-control';
 export { TransitionRepeaterControl } from './controls/transition-control/transition-repeater-control';
 export { PopoverContent } from './components/popover-content';
 export { enqueueFont } from './controls/font-family-control/enqueue-font';