@elementor/editor-editing-panel 1.22.0 → 1.24.0

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

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { ArrowBackIcon, ArrowForwardIcon, ArrowRightIcon } from '@elementor/icons';
 import { DirectionProvider, Grid, ThemeProvider } 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';
 
 type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
 

package/src/components/style-sections/position-section/dimensions-field.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { ControlLabel, SizeControl } from '@elementor/editor-controls';
+import { SizeControl } from '@elementor/editor-controls';
 import { SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
 import { Grid, Stack, 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 { RotatedIcon } from '../layout-section/utils/rotated-icon';
 
 type Side = 'inset-inline-start' | 'inset-inline-end' | 'inset-block-start' | 'inset-block-end';

package/src/components/style-sections/position-section/position-field.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ControlLabel, SelectControl } from '@elementor/editor-controls';
+import { SelectControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
 
 const positionOptions = [
 	{ label: __( 'Static', 'elementor' ), value: 'static' },

package/src/components/style-sections/position-section/z-index-field.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ControlLabel, NumberControl } from '@elementor/editor-controls';
+import { NumberControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
 
 export const ZIndexField = () => {
 	return (

package/src/components/style-sections/size-section/overflow-field.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { EyeIcon, EyeOffIcon, LetterAIcon } from '@elementor/icons';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
 
 type Overflows = 'visible' | 'hidden' | 'auto';
 

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ControlLabel, type ExtendedValue, SizeControl } from '@elementor/editor-controls';
+import { type ExtendedValue, SizeControl } from '@elementor/editor-controls';
 import { Grid, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField, type StylesFieldProps } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
 import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
 import { OverflowField } from './overflow-field';

package/src/components/style-sections/typography-section/font-family-field.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ControlLabel, FontFamilyControl } from '@elementor/editor-controls';
+import { FontFamilyControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
 import { useFontFamilies } from './hooks/use-font-families';
 
 export const FontFamilyField = () => {

package/src/components/style-sections/typography-section/font-size-field.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ControlLabel, SizeControl } from '@elementor/editor-controls';
+import { SizeControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
 
 export const FontSizeField = () => {
 	return (

package/src/components/style-sections/typography-section/font-style-field.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { ControlFormLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { ItalicIcon, MinusIcon } from '@elementor/icons';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -26,7 +26,7 @@ export const FontStyleField = () => (
 	<StylesField bind="font-style">
 		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 			<Grid item xs={ 6 }>
-				<ControlLabel>{ __( 'Font style', 'elementor' ) }</ControlLabel>
+				<ControlFormLabel>{ __( 'Font style', 'elementor' ) }</ControlFormLabel>
 			</Grid>
 			<Grid item xs={ 6 } display="flex" justifyContent="end">
 				<ToggleControl options={ options } />

package/src/components/style-sections/typography-section/font-weight-field.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ControlLabel, SelectControl } from '@elementor/editor-controls';
+import { SelectControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
 
 const fontWeightOptions = [
 	{ value: '100', label: __( '100 - Thin', 'elementor' ) },

package/src/components/style-sections/typography-section/letter-spacing-field.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ControlLabel, SizeControl } from '@elementor/editor-controls';
+import { SizeControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
 
 export const LetterSpacingField = () => {
 	return (

package/src/components/style-sections/typography-section/line-height-field.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ControlLabel, SizeControl } from '@elementor/editor-controls';
+import { SizeControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
 
 export const LineHeightField = () => {
 	return (

package/src/components/style-sections/typography-section/text-alignment-field.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { AlignCenterIcon, AlignJustifiedIcon, AlignLeftIcon, AlignRightIcon } from '@elementor/icons';
 import { Grid, withDirection } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
 import { RotatedIcon } from '../layout-section/utils/rotated-icon';
 
 type Alignments = 'start' | 'center' | 'end' | 'justify';

package/src/components/style-sections/typography-section/text-color-field.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ColorControl, ControlLabel } from '@elementor/editor-controls';
+import { ColorControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
 
 export const TextColorField = () => {
 	return (

package/src/components/style-sections/typography-section/text-decoration-field.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { ControlLabel, ToggleControl, type ToggleControlProps } from '@elementor/editor-controls';
+import { ToggleControl, type ToggleControlProps } from '@elementor/editor-controls';
 import { MinusIcon, OverlineIcon, StrikethroughIcon, UnderlineIcon } from '@elementor/icons';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
 
 type Decoration = 'none' | 'underline' | 'line-through' | 'overline';
 

package/src/components/style-sections/typography-section/text-direction-field.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { TextDirectionLtrIcon, TextDirectionRtlIcon } from '@elementor/icons';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
 
 type Direction = 'ltr' | 'rtl';
 

package/src/components/style-sections/typography-section/text-stroke-field.tsx

@@ -37,15 +37,15 @@ export const TextStrokeField = () => {
 	const hasTextStroke = Boolean( textStroke );
 
 	return (
-		<AddOrRemoveContent
-			label={ __( 'Text stroke', 'elementor' ) }
-			isAdded={ hasTextStroke }
-			onAdd={ addTextStroke }
-			onRemove={ removeTextStroke }
-		>
-			<StylesField bind={ 'stroke' }>
+		<StylesField bind={ 'stroke' }>
+			<AddOrRemoveContent
+				label={ __( 'Text stroke', 'elementor' ) }
+				isAdded={ hasTextStroke }
+				onAdd={ addTextStroke }
+				onRemove={ removeTextStroke }
+			>
 				<StrokeControl />
-			</StylesField>
-		</AddOrRemoveContent>
+			</AddOrRemoveContent>
+		</StylesField>
 	);
 };

package/src/components/style-sections/typography-section/transform-field.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { LetterCaseIcon, LetterCaseLowerIcon, LetterCaseUpperIcon, MinusIcon } from '@elementor/icons';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
 
 type Transforms = 'none' | 'capitalize' | 'uppercase' | 'lowercase';
 

package/src/components/style-sections/typography-section/word-spacing-field.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ControlLabel, SizeControl } from '@elementor/editor-controls';
+import { SizeControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
 
 export const WordSpacingField = () => {
 	return (

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useId } from 'react';
-import { ControlLabel, useBoundProp } from '@elementor/editor-controls';
+import { ControlFormLabel, useBoundProp } from '@elementor/editor-controls';
 import type { Control, ControlsSection } from '@elementor/editor-elements';
 import { DatabaseIcon, SettingsIcon, XIcon } from '@elementor/icons';
 import {
@@ -156,7 +156,7 @@ const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls
 			{ tabs.map( ( { value }, index ) => {
 				return (
 					<TabPanel key={ index } sx={ { flexGrow: 1, py: 0 } } { ...getTabPanelProps( index ) }>
-						<PopoverContent p={ 1.5 }>
+						<PopoverContent p={ 2 } gap={ 2 }>
 							{ value.items.map( ( item ) => {
 								if ( item.type === 'control' ) {
 									return <Control key={ item.value.bind } control={ item.value } />;
@@ -181,7 +181,7 @@ const Control = ( { control }: { control: Control[ 'value' ] } ) => {
 			<Grid container gap={ 0.75 }>
 				{ control.label ? (
 					<Grid item xs={ 12 }>
-						<ControlLabel>{ control.label }</ControlLabel>
+						<ControlFormLabel>{ control.label }</ControlFormLabel>
 					</Grid>
 				) : null }
 				<Grid item xs={ 12 }>

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

@@ -7,9 +7,9 @@ import {
 	Divider,
 	InputAdornment,
 	Link,
-	ListSubheader,
 	MenuItem,
 	MenuList,
+	MenuSubheader,
 	Stack,
 	TextField,
 	Typography,
@@ -58,12 +58,12 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 		setSearchValue( event.target.value );
 	};
 
-	const handleSetDynamicTag = ( value: string ) => {
+	const handleSetDynamicTag = ( value: string, label: string ) => {
 		if ( ! isCurrentValueDynamic ) {
 			updatePropValueHistory( anyValue );
 		}
 
-		setValue( { name: value, settings: {} } );
+		setValue( { name: value, settings: { label } } );
 
 		onSelect?.();
 	};
@@ -96,11 +96,11 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 							<MenuList role="listbox" tabIndex={ 0 }>
 								{ options.map( ( [ category, items ], index ) => (
 									<Fragment key={ index }>
-										<ListSubheader
+										<MenuSubheader
 											sx={ { px: 1.5, typography: 'caption', color: 'text.tertiary' } }
 										>
 											{ dynamicGroups?.[ category ]?.title || category }
-										</ListSubheader>
+										</MenuSubheader>
 										{ items.map( ( { value, label: tagLabel } ) => {
 											const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
 
@@ -110,8 +110,8 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 													selected={ isSelected }
 													// eslint-disable-next-line jsx-a11y/no-autofocus
 													autoFocus={ isSelected }
-													sx={ { px: 1.5, typography: 'caption' } }
-													onClick={ () => handleSetDynamicTag( value ) }
+													sx={ { px: 3.5, typography: 'caption' } }
+													onClick={ () => handleSetDynamicTag( value, tagLabel ) }
 												>
 													{ tagLabel }
 												</MenuItem>

package/src/dynamics/hooks/use-prop-dynamic-tags.ts

@@ -15,6 +15,7 @@ export const usePropDynamicTags = () => {
 		categories = propDynamicType?.settings.categories || [];
 	}
 
+	// eslint-disable-next-line react-compiler/react-compiler
 	// eslint-disable-next-line react-hooks/exhaustive-deps
 	return useMemo( () => getDynamicTagsByCategories( categories ), [ categories.join() ] );
 };

package/src/styles-inheritance/styles-inheritance-indicator.tsx

@@ -6,7 +6,6 @@ import { __ } from '@wordpress/i18n';
 
 import { useStyle } from '../contexts/style-context';
 import { useStylesInheritanceField } from '../contexts/styles-inheritance-context';
-import { useStylesField } from '../hooks/use-styles-field';
 
 const Circle = styled( 'div', {
 	shouldForwardProp: ( prop ) => prop !== 'variant',
@@ -17,21 +16,23 @@ const Circle = styled( 'div', {
 	background-color: ${ ( { theme, variant } ) => {
 		switch ( variant ) {
 			case 'overridden':
-				return theme.palette.warning.main;
+				return theme.palette.warning.light;
 			case 'global-affects':
-				return theme.palette.global.main;
+				return theme.palette.global.dark;
 			case 'local-affects':
 				return theme.palette.primary.main;
 			default:
-				return theme.palette.text.secondary;
+				return theme.palette.text.disabled;
 		}
 	} };
 `;
 
 export const StylesInheritanceIndicator = () => {
-	const { bind } = useBoundProp();
+	const { value, path } = useBoundProp();
 	const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
-	const [ value ] = useStylesField( bind );
+
+	// in the styles inheritance snapshot the keys are only those of the top level style schema attributes
+	const [ bind ] = path;
 	const inheritanceChain = useStylesInheritanceField( bind );
 
 	if ( ! inheritanceChain.length ) {