@elementor/editor-controls 0.19.0 → 0.20.0

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": "0.19.0",
+  "version": "0.20.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -41,14 +41,15 @@
   },
   "dependencies": {
     "@elementor/editor-current-user": "0.3.0",
-    "@elementor/editor-elements": "0.6.5",
+    "@elementor/editor-elements": "0.7.0",
     "@elementor/editor-props": "0.11.1",
+    "@elementor/editor-ui": "0.5.0",
     "@elementor/env": "0.3.5",
     "@elementor/http": "0.1.4",
     "@elementor/icons": "1.37.0",
     "@elementor/query": "0.2.4",
     "@elementor/session": "0.1.0",
-    "@elementor/ui": "1.26.0",
+    "@elementor/ui": "1.32.1",
     "@elementor/utils": "0.4.0",
     "@elementor/wp-media": "0.6.0",
     "@tanstack/react-virtual": "3.13.3",

package/src/components/text-field-inner-selection.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { forwardRef, useId } from 'react';
 import { type PropValue } from '@elementor/editor-props';
-import { bindMenu, bindTrigger, Button, InputAdornment, Menu, MenuItem, TextField, usePopupState } from '@elementor/ui';
+import { MenuListItem } from '@elementor/editor-ui';
+import { bindMenu, bindTrigger, Button, InputAdornment, Menu, TextField, usePopupState } from '@elementor/ui';
 
 type TextFieldInnerSelectionProps = {
 	placeholder?: string;
@@ -66,9 +67,9 @@ export const SelectionEndAdornment = < T extends string >( {
 
 			<Menu MenuListProps={ { dense: true } } { ...bindMenu( popupState ) }>
 				{ options.map( ( option, index ) => (
-					<MenuItem key={ option } onClick={ () => handleMenuItemClick( index ) }>
+					<MenuListItem key={ option } onClick={ () => handleMenuItemClick( index ) }>
 						{ option.toUpperCase() }
-					</MenuItem>
+					</MenuListItem>
 				) ) }
 			</Menu>
 		</InputAdornment>

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
+import { MenuListItem } from '@elementor/editor-ui';
 import { LetterXIcon, LetterYIcon } from '@elementor/icons';
-import { Grid, MenuItem, Select, type SelectChangeEvent } from '@elementor/ui';
+import { Grid, Select, type SelectChangeEvent } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../../../bound-prop-context';
@@ -65,9 +66,9 @@ export const BackgroundImageOverlayPosition = () => {
 							fullWidth
 						>
 							{ backgroundPositionOptions.map( ( { label, value } ) => (
-								<MenuItem key={ value } value={ value ?? '' }>
+								<MenuListItem key={ value } value={ value ?? '' }>
 									{ label }
-								</MenuItem>
+								</MenuListItem>
 							) ) }
 						</Select>
 					</Grid>

package/src/controls/equal-unequal-sizes-control.tsx

@@ -134,6 +134,7 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 				} }
 				{ ...bindPopover( popupState ) }
 				slotProps={ {
+					// eslint-disable-next-line react-compiler/react-compiler
 					paper: { sx: { mt: 0.5, width: controlRef.current?.getBoundingClientRect().width } },
 				} }
 			>

package/src/controls/font-family-control/font-family-control.tsx

@@ -10,8 +10,8 @@ import {
 	IconButton,
 	InputAdornment,
 	Link,
-	ListSubheader,
 	MenuList,
+	MenuSubheader,
 	Popover,
 	Stack,
 	styled,
@@ -189,6 +189,7 @@ const FontList = ( { fontListItems, setFontFamily, handleClose, fontFamily }: Fo
 		() => {
 			virtualizer.scrollToIndex( fontListItems.findIndex( ( item ) => item.value === fontFamily ) );
 		},
+		// eslint-disable-next-line react-compiler/react-compiler
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ fontFamily ]
 	);
@@ -221,14 +222,14 @@ const FontList = ( { fontListItems, setFontFamily, handleClose, fontFamily }: Fo
 
 					if ( item.type === 'category' ) {
 						return (
-							<ListSubheader
+							<MenuSubheader
 								key={ virtualRow.key }
 								style={ {
 									transform: `translateY(${ virtualRow.start }px)`,
 								} }
 							>
 								{ item.value }
-							</ListSubheader>
+							</MenuSubheader>
 						);
 					}
 

package/src/controls/link-control.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useMemo, useState } from 'react';
+import { getAncestorWithAnchorTag, getDescendantWithAnchorTag } from '@elementor/editor-elements';
 import {
 	booleanPropTypeUtil,
 	linkPropTypeUtil,
@@ -26,7 +27,6 @@ import {
 import { ControlLabel } from '../components/control-label';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
-import { getLinkRestriction } from '../utils/link-restriction';
 import { type ControlProps } from '../utils/types';
 
 type Props = ControlProps< {
@@ -68,7 +68,7 @@ export const LinkControl = createControl( ( props: Props ) => {
 	);
 
 	const onEnabledChange = () => {
-		const { shouldRestrict } = getLinkRestriction( elementId );
+		const shouldRestrict = getAncestorWithAnchorTag( elementId ) || getDescendantWithAnchorTag( elementId );
 
 		if ( shouldRestrict && ! isEnabled ) {
 			return;

package/src/controls/select-control.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { stringPropTypeUtil, type StringPropValue } from '@elementor/editor-props';
-import { MenuItem, Select, type SelectChangeEvent } from '@elementor/ui';
+import { MenuListItem } from '@elementor/editor-ui';
+import { Select, type SelectChangeEvent } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
@@ -32,9 +33,9 @@ export const SelectControl = createControl( ( { options, onChange }: Props ) =>
 				fullWidth
 			>
 				{ options.map( ( { label, ...props } ) => (
-					<MenuItem key={ props.value } { ...props } value={ props.value ?? '' }>
+					<MenuListItem key={ props.value } { ...props } value={ props.value ?? '' }>
 						{ label }
-					</MenuItem>
+					</MenuListItem>
 				) ) }
 			</Select>
 		</ControlActions>

package/src/hooks/use-sync-external-state.tsx

@@ -34,6 +34,7 @@ export const useSyncExternalState = < TValue, >( {
 	useEffect( () => {
 		setInternal( ( prevInternal ) => toInternal( external, prevInternal ) );
 
+		// eslint-disable-next-line react-compiler/react-compiler
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ external ] );
 

package/src/utils/link-restriction.ts

@@ -1,47 +0,0 @@
-import { getContainer } from '@elementor/editor-elements';
-
-type LinkRestriction =
-	| {
-			shouldRestrict: true;
-			restrictReason: 'ancestor' | 'descendant';
-	  }
-	| {
-			shouldRestrict: false;
-			restrictReason?: never;
-	  };
-
-export function getLinkRestriction( elementId: string ): LinkRestriction {
-	if ( getAncestorAnchor( elementId ) ) {
-		return {
-			shouldRestrict: true,
-			restrictReason: 'ancestor',
-		};
-	}
-
-	if ( getDescendantAnchor( elementId ) ) {
-		return {
-			shouldRestrict: true,
-			restrictReason: 'descendant',
-		};
-	}
-
-	return { shouldRestrict: false };
-}
-
-function getAncestorAnchor( elementId: string ) {
-	const element = getElementView( elementId );
-
-	return element?.closest( 'a' ) || null;
-}
-
-function getDescendantAnchor( elementId: string ) {
-	const element = getElementView( elementId );
-
-	return element?.querySelector( 'a' ) || null;
-}
-
-function getElementView( id: string ) {
-	const elementContainer = getContainer( id );
-
-	return elementContainer?.view?.el || null;
-}