@elementor/editor-editing-panel 1.29.1 → 1.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.29.1",
+  "version": "1.30.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,24 +39,24 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.18.6",
-    "@elementor/editor-canvas": "0.18.1",
-    "@elementor/editor-controls": "0.26.0",
+    "@elementor/editor": "0.19.0",
+    "@elementor/editor-canvas": "0.19.0",
+    "@elementor/editor-controls": "0.27.0",
     "@elementor/editor-current-user": "0.3.0",
     "@elementor/editor-elements": "0.8.1",
-    "@elementor/editor-panels": "0.14.1",
+    "@elementor/editor-panels": "0.15.0",
     "@elementor/editor-props": "0.12.0",
     "@elementor/editor-responsive": "0.13.4",
     "@elementor/editor-styles": "0.6.6",
     "@elementor/editor-styles-repository": "0.8.4",
-    "@elementor/editor-ui": "0.7.1",
+    "@elementor/editor-ui": "0.8.0",
     "@elementor/editor-v1-adapters": "0.11.0",
     "@elementor/icons": "1.37.0",
     "@elementor/locations": "0.7.7",
     "@elementor/menus": "0.1.4",
     "@elementor/schema": "0.1.2",
     "@elementor/session": "0.1.0",
-    "@elementor/ui": "1.32.1",
+    "@elementor/ui": "1.33.2",
     "@elementor/utils": "0.4.0",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/css-classes/css-class-item.tsx

@@ -108,6 +108,7 @@ export function CssClassItem( {
 					} }
 					aria-pressed={ isActive }
 					sx={ ( theme: Theme ) => ( {
+						lineHeight: 1,
 						cursor: isActive && allowRename && ! isShowingState ? 'text' : 'pointer',
 						borderRadius: `${ theme.shape.borderRadius * 0.75 }px`,
 						'&.Mui-focusVisible': {

package/src/components/editing-panel.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ControlActionsProvider, ControlReplacementProvider } from '@elementor/editor-controls';
+import { ControlActionsProvider, ControlReplacementsProvider } from '@elementor/editor-controls';
 import { useSelectedElement } from '@elementor/editor-elements';
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
 import { ThemeProvider } from '@elementor/editor-ui';
@@ -9,7 +9,7 @@ import { ErrorBoundary } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { ElementProvider } from '../contexts/element-context';
-import { getControlReplacement } from '../control-replacement';
+import { getControlReplacements } from '../control-replacement';
 import { controlActionsMenu } from '../controls-actions';
 import { EditorPanelErrorFallback } from './editing-panel-error-fallback';
 import { EditingPanelTabs } from './editing-panel-tabs';
@@ -18,7 +18,7 @@ const { useMenuItems } = controlActionsMenu;
 
 export const EditingPanel = () => {
 	const { element, elementType } = useSelectedElement();
-	const controlReplacement = getControlReplacement();
+	const controlReplacements = getControlReplacements();
 	const menuItems = useMenuItems().default;
 
 	if ( ! element || ! elementType ) {
@@ -39,11 +39,11 @@ export const EditingPanel = () => {
 						</PanelHeader>
 						<PanelBody>
 							<ControlActionsProvider items={ menuItems }>
-								<ControlReplacementProvider { ...controlReplacement }>
+								<ControlReplacementsProvider replacements={ controlReplacements }>
 									<ElementProvider element={ element } elementType={ elementType }>
 										<EditingPanelTabs />
 									</ElementProvider>
-								</ControlReplacementProvider>
+								</ControlReplacementsProvider>
 							</ControlActionsProvider>
 						</PanelBody>
 					</Panel>

package/src/components/style-sections/layout-section/align-self-child-field.tsx

@@ -1,57 +1,90 @@
 import * as React from 'react';
-import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { ToggleControl } from '@elementor/editor-controls';
 import {
 	LayoutAlignCenterIcon as CenterIcon,
 	LayoutAlignLeftIcon,
 	LayoutAlignRightIcon,
 	LayoutDistributeVerticalIcon as JustifyIcon,
 } from '@elementor/icons';
-import { DirectionProvider, Grid, ThemeProvider, withDirection } from '@elementor/ui';
+import { DirectionProvider, Grid, ThemeProvider, type ToggleButtonProps, withDirection } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
 import { ControlLabel } from '../../control-label';
+import { type FlexDirection } from './flex-direction-field';
 import { RotatedIcon } from './utils/rotated-icon';
 
-type AlignItems = 'start' | 'center' | 'end' | 'stretch';
+const ALIGN_SELF_CHILD_OFFSET_MAP: Record< FlexDirection, number > = {
+	row: 90,
+	'row-reverse': 90,
+	column: 0,
+	'column-reverse': 0,
+};
 
 const StartIcon = withDirection( LayoutAlignLeftIcon );
 const EndIcon = withDirection( LayoutAlignRightIcon );
 
 const iconProps = {
 	isClockwise: false,
-	offset: 90,
 };
 
-const options: ToggleButtonGroupItem< AlignItems >[] = [
+const getOptions = ( parentStyleDirection: FlexDirection ) => [
 	{
 		value: 'start',
 		label: __( 'Start', 'elementor' ),
-		renderContent: ( { size } ) => <RotatedIcon icon={ StartIcon } size={ size } { ...iconProps } />,
+		renderContent: ( { size }: { size: ToggleButtonProps[ 'size' ] } ) => (
+			<RotatedIcon
+				icon={ StartIcon }
+				size={ size }
+				offset={ ALIGN_SELF_CHILD_OFFSET_MAP[ parentStyleDirection ] }
+				{ ...iconProps }
+			/>
+		),
 		showTooltip: true,
 	},
 	{
 		value: 'center',
 		label: __( 'Center', 'elementor' ),
-		renderContent: ( { size } ) => <RotatedIcon icon={ CenterIcon } size={ size } { ...iconProps } />,
+		renderContent: ( { size }: { size: ToggleButtonProps[ 'size' ] } ) => (
+			<RotatedIcon
+				icon={ CenterIcon }
+				size={ size }
+				offset={ ALIGN_SELF_CHILD_OFFSET_MAP[ parentStyleDirection ] }
+				{ ...iconProps }
+			/>
+		),
 		showTooltip: true,
 	},
 	{
 		value: 'end',
 		label: __( 'End', 'elementor' ),
-		renderContent: ( { size } ) => <RotatedIcon icon={ EndIcon } size={ size } { ...iconProps } />,
+		renderContent: ( { size }: { size: ToggleButtonProps[ 'size' ] } ) => (
+			<RotatedIcon
+				icon={ EndIcon }
+				size={ size }
+				offset={ ALIGN_SELF_CHILD_OFFSET_MAP[ parentStyleDirection ] }
+				{ ...iconProps }
+			/>
+		),
 		showTooltip: true,
 	},
 	{
 		value: 'stretch',
 		label: __( 'Stretch', 'elementor' ),
-		renderContent: ( { size } ) => <RotatedIcon icon={ JustifyIcon } size={ size } { ...iconProps } />,
+		renderContent: ( { size }: { size: ToggleButtonProps[ 'size' ] } ) => (
+			<RotatedIcon
+				icon={ JustifyIcon }
+				size={ size }
+				offset={ ALIGN_SELF_CHILD_OFFSET_MAP[ parentStyleDirection ] }
+				{ ...iconProps }
+			/>
+		),
 		showTooltip: true,
 	},
 ];
 
-export const AlignSelfChild = () => {
+export const AlignSelfChild = ( { parentStyleDirection }: { parentStyleDirection: FlexDirection } ) => {
 	const { isSiteRtl } = useDirection();
 
 	return (
@@ -63,7 +96,7 @@ export const AlignSelfChild = () => {
 							<ControlLabel>{ __( 'Align self', 'elementor' ) }</ControlLabel>
 						</Grid>
 						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
-							<ToggleControl options={ options } />
+							<ToggleControl options={ getOptions( parentStyleDirection as FlexDirection ) } />
 						</Grid>
 					</Grid>
 				</StylesField>

package/src/components/style-sections/layout-section/layout-section.tsx

@@ -13,7 +13,7 @@ import { AlignContentField } from './align-content-field';
 import { AlignItemsField } from './align-items-field';
 import { AlignSelfChild } from './align-self-child-field';
 import { DisplayField, useDisplayPlaceholderValue } from './display-field';
-import { FlexDirectionField } from './flex-direction-field';
+import { type FlexDirection, FlexDirectionField } from './flex-direction-field';
 import { FlexOrderField } from './flex-order-field';
 import { FlexSizeField } from './flex-size-field';
 import { GapControlField } from './gap-control-field';
@@ -27,12 +27,13 @@ export const LayoutSection = () => {
 	const { element } = useElement();
 	const parent = useParentElement( element.id );
 	const parentStyle = useComputedStyle( parent?.id || null );
+	const parentStyleDirection = parentStyle?.flexDirection ?? 'row';
 
 	return (
 		<SectionContent>
 			<DisplayField />
 			{ isDisplayFlex && <FlexFields /> }
-			{ 'flex' === parentStyle?.display && <FlexChildFields /> }
+			{ 'flex' === parentStyle?.display && <FlexChildFields parentStyleDirection={ parentStyleDirection } /> }
 		</SectionContent>
 	);
 };
@@ -53,11 +54,11 @@ const FlexFields = () => {
 	);
 };
 
-const FlexChildFields = () => (
+const FlexChildFields = ( { parentStyleDirection }: { parentStyleDirection: string } ) => (
 	<>
 		<PanelDivider />
 		<ControlFormLabel>{ __( 'Flex child', 'elementor' ) }</ControlFormLabel>
-		<AlignSelfChild />
+		<AlignSelfChild parentStyleDirection={ parentStyleDirection as FlexDirection } />
 		<FlexOrderField />
 		<FlexSizeField />
 	</>

package/src/components/style-sections/layout-section/utils/rotated-icon.tsx

@@ -36,10 +36,9 @@ export const RotatedIcon = ( {
 	disableRotationForReversed = false,
 }: Props ) => {
 	const rotate = useRef( useGetTargetAngle( isClockwise, offset, disableRotationForReversed ) );
-	// eslint-disable-next-line react-compiler/react-compiler
+
 	rotate.current = useGetTargetAngle( isClockwise, offset, disableRotationForReversed, rotate );
 
-	// eslint-disable-next-line react-compiler/react-compiler
 	return <Icon fontSize={ size } sx={ { transition: '.3s', rotate: `${ rotate.current }deg` } } />;
 };
 

package/src/control-replacement.tsx

@@ -1,3 +1,3 @@
-import { createControlReplacement } from '@elementor/editor-controls';
+import { createControlReplacementsRegistry } from '@elementor/editor-controls';
 
-export const { replaceControl, getControlReplacement } = createControlReplacement();
+export const { registerControlReplacement, getControlReplacements } = createControlReplacementsRegistry();

package/src/dynamics/components/dynamic-selection-control.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useId } from 'react';
 import { ControlFormLabel, useBoundProp } from '@elementor/editor-controls';
 import type { Control, ControlsSection } from '@elementor/editor-elements';
 import { DatabaseIcon, SettingsIcon, XIcon } from '@elementor/icons';
@@ -38,11 +37,11 @@ const SIZE = 'tiny';
 export const DynamicSelectionControl = () => {
 	const { setValue: setAnyValue } = useBoundProp();
 	const { bind, value } = useBoundProp( dynamicPropTypeUtil );
+
 	const [ propValueFromHistory ] = usePersistDynamicValue( bind );
-	const { name: tagName = '' } = value;
+	const selectionPopoverState = usePopupState( { variant: 'popover' } );
 
-	const selectionPopoverId = useId();
-	const selectionPopoverState = usePopupState( { variant: 'popover', popupId: selectionPopoverId } );
+	const { name: tagName = '' } = value;
 
 	const dynamicTag = useDynamicTag( tagName );
 
@@ -97,8 +96,7 @@ export const DynamicSelectionControl = () => {
 };
 
 export const DynamicSettingsPopover = ( { dynamicTag }: { dynamicTag: DynamicTag } ) => {
-	const popupId = useId();
-	const settingsPopupState = usePopupState( { variant: 'popover', popupId } );
+	const popupState = usePopupState( { variant: 'popover' } );
 
 	const hasDynamicSettings = !! dynamicTag.atomic_controls.length;
 
@@ -108,23 +106,20 @@ export const DynamicSettingsPopover = ( { dynamicTag }: { dynamicTag: DynamicTag
 
 	return (
 		<>
-			<IconButton
-				size={ SIZE }
-				{ ...bindTrigger( settingsPopupState ) }
-				aria-label={ __( 'Settings', 'elementor' ) }
-			>
+			<IconButton size={ SIZE } { ...bindTrigger( popupState ) } aria-label={ __( 'Settings', 'elementor' ) }>
 				<SettingsIcon fontSize={ SIZE } />
 			</IconButton>
 			<Popover
+				disablePortal
 				disableScrollLock
 				anchorOrigin={ { vertical: 'bottom', horizontal: 'center' } }
-				{ ...bindPopover( settingsPopupState ) }
+				{ ...bindPopover( popupState ) }
 			>
 				<Paper component={ Stack } sx={ { minHeight: '300px', width: '220px' } }>
 					<Stack direction="row" alignItems="center" px={ 1.5 } pt={ 2 } pb={ 1 }>
 						<DatabaseIcon fontSize={ SIZE } sx={ { mr: 0.5 } } />
 						<Typography variant="subtitle2">{ dynamicTag.label }</Typography>
-						<IconButton sx={ { ml: 'auto' } } size={ SIZE } onClick={ settingsPopupState.close }>
+						<IconButton sx={ { ml: 'auto' } } size={ SIZE } onClick={ popupState.close }>
 							<XIcon fontSize={ SIZE } />
 						</IconButton>
 					</Stack>

package/src/dynamics/init.ts

@@ -1,6 +1,6 @@
 import { settingsTransformersRegistry, styleTransformersRegistry } from '@elementor/editor-canvas';
 
-import { replaceControl } from '../control-replacement';
+import { registerControlReplacement } from '../control-replacement';
 import { controlActionsMenu } from '../controls-actions';
 import { DynamicSelectionControl } from './components/dynamic-selection-control';
 import { dynamicTransformer } from './dynamic-transformer';
@@ -10,7 +10,7 @@ import { isDynamicPropValue } from './utils';
 const { registerPopoverAction } = controlActionsMenu;
 
 export const init = () => {
-	replaceControl( {
+	registerControlReplacement( {
 		component: DynamicSelectionControl,
 		condition: ( { value } ) => isDynamicPropValue( value ),
 	} );

package/src/index.ts

@@ -1,7 +1,8 @@
 export { useBoundProp } from '@elementor/editor-controls';
 export type { PopoverActionProps } from './popover-action';
-export { replaceControl } from './control-replacement';
+export { registerControlReplacement } from './control-replacement';
 export { injectIntoClassSelectorActions } from './components/css-classes/css-class-selector';
 export { usePanelActions, usePanelStatus } from './panel';
+export { controlActionsMenu } from './controls-actions';
 
 export { init } from './init';