@elementor/editor-editing-panel 1.48.0 → 1.50.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.48.0",
+  "version": "1.50.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,17 +39,17 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.21.0",
-    "@elementor/editor-canvas": "0.26.0",
-    "@elementor/editor-controls": "1.3.0",
-    "@elementor/editor-documents": "0.13.9",
-    "@elementor/editor-elements": "0.9.0",
-    "@elementor/editor-panels": "0.17.0",
-    "@elementor/editor-props": "0.16.0",
+    "@elementor/editor": "0.21.1",
+    "@elementor/editor-canvas": "0.28.0",
+    "@elementor/editor-controls": "1.5.0",
+    "@elementor/editor-documents": "0.13.10",
+    "@elementor/editor-elements": "0.9.2",
+    "@elementor/editor-panels": "0.17.1",
+    "@elementor/editor-props": "0.18.0",
     "@elementor/editor-responsive": "0.13.6",
-    "@elementor/editor-styles": "0.6.12",
-    "@elementor/editor-styles-repository": "0.10.5",
-    "@elementor/editor-ui": "0.14.0",
+    "@elementor/editor-styles": "0.6.14",
+    "@elementor/editor-styles-repository": "0.10.7",
+    "@elementor/editor-ui": "0.14.2",
     "@elementor/editor-v1-adapters": "0.12.1",
     "@elementor/icons": "1.46.0",
     "@elementor/locations": "0.8.0",

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

@@ -10,6 +10,7 @@ import {
 	type ChipOwnProps,
 	Stack,
 	type Theme,
+	ThemeProvider,
 	Typography,
 	UnstableChipGroup,
 	usePopupState,
@@ -69,7 +70,7 @@ export function CssClassItem( props: CssClassItemProps ) {
 	const isShowingState = isActive && meta.state;
 
 	return (
-		<>
+		<ThemeProvider palette="default">
 			<UnstableChipGroup
 				ref={ setChipRef }
 				{ ...chipGroupProps }
@@ -144,7 +145,7 @@ export function CssClassItem( props: CssClassItemProps ) {
 			<CssClassProvider { ...classProps } handleRename={ openEditMode }>
 				<CssClassMenu popupState={ popupState } anchorEl={ chipRef } fixed={ fixed } />
 			</CssClassProvider>
-		</>
+		</ThemeProvider>
 	);
 }
 

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

@@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n';
 
 import { useStyle } from '../../contexts/style-context';
 import { type StyleDefinitionStateWithNormal } from '../../styles-inheritance/types';
-import { getStylesProviderThemeColor } from '../../utils/get-styles-provider-color';
+import { getTempStylesProviderThemeColor } from '../../utils/get-styles-provider-color';
 import { StyleIndicator } from '../style-indicator';
 import { useCssClass } from './css-class-context';
 import { useUnapplyClass } from './use-apply-and-unapply-class';
@@ -161,7 +161,7 @@ function StateMenuItem( { state, closeMenu, ...props }: StateMenuItemProps ) {
 					{ isStyled && (
 						<StyleIndicator
 							aria-label={ __( 'Has style', 'elementor' ) }
-							getColor={ getStylesProviderThemeColor( provider ?? '' ) }
+							getColor={ getTempStylesProviderThemeColor( provider ?? '' ) }
 						/>
 					) }
 					{ state ?? 'normal' }

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

@@ -53,7 +53,7 @@ const EMPTY_OPTION = {
 	label: __( 'local', 'elementor' ),
 	value: null,
 	fixed: true,
-	color: 'accent',
+	color: getTempStylesProviderColorName( 'accent' ),
 	icon: <MapPinIcon />,
 	provider: null,
 } satisfies StyleDefOption;
@@ -221,7 +221,7 @@ function useOptions() {
 					label: styleDef.label,
 					value: styleDef.id,
 					fixed: isElements,
-					color: getStylesProviderColorName( provider.getKey() ),
+					color: getTempStylesProviderColorName( getStylesProviderColorName( provider.getKey() ) ),
 					icon: isElements ? <MapPinIcon /> : null,
 					provider: provider.getKey(),
 				};
@@ -229,6 +229,14 @@ function useOptions() {
 		} );
 }
 
+function getTempStylesProviderColorName( color: ChipOwnProps[ 'color' ] ): ChipOwnProps[ 'color' ] {
+	if ( color === 'accent' ) {
+		return 'primary';
+	}
+
+	return color;
+}
+
 function useCreateAction() {
 	const [ provider, createAction ] = useCreateAndApplyClass();
 	if ( ! provider || ! createAction ) {

package/src/components/popover-body.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { PopoverBody as BasePopoverBody } from '@elementor/editor-ui';
+
+import { useSectionWidth } from '../contexts/section-context';
+
+type Props = React.ComponentProps< typeof BasePopoverBody >;
+
+export const PopoverBody = ( props: Props ) => {
+	const sectionWidth = useSectionWidth();
+
+	return <BasePopoverBody { ...props } width={ sectionWidth } />;
+};

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

@@ -10,8 +10,9 @@ import { SectionContent } from '../../section-content';
 import { OpacityControlField } from '../layout-section/opacity-control-field';
 
 const BOX_SHADOW_LABEL = __( 'Box shadow', 'elementor' );
-const FILTER_LABEL = __( 'Filter', 'elementor' );
+const FILTER_LABEL = __( 'Filters', 'elementor' );
 const TRANSFORM_LABEL = __( 'Transform', 'elementor' );
+const BACKDROP_FILTER_LABEL = __( 'Backdrop filters', 'elementor' );
 
 export const EffectsSection = () => {
 	const isVersion331Active = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_31 );
@@ -37,6 +38,10 @@ export const EffectsSection = () => {
 					<StylesField bind="filter" propDisplayName={ FILTER_LABEL }>
 						<FilterRepeaterControl />
 					</StylesField>
+					<PanelDivider />
+					<StylesField bind="backdrop-filter" propDisplayName={ BACKDROP_FILTER_LABEL }>
+						<FilterRepeaterControl filterPropName="backdrop-filter" />
+					</StylesField>
 				</>
 			) }
 		</SectionContent>

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { ControlToggleButtonGroup, NumberControl, type ToggleButtonGroupItem } from '@elementor/editor-controls';
 import { type NumberPropValue } from '@elementor/editor-props';
 import { ArrowDownSmallIcon, ArrowUpSmallIcon, PencilIcon } from '@elementor/icons';
@@ -60,6 +60,11 @@ export const FlexOrderField = () => {
 
 	const [ groupControlValue, setGroupControlValue ] = useState( getGroupControlValue( order?.value || null ) );
 
+	useEffect( () => {
+		const newGroupControlValue = getGroupControlValue( order?.value || null );
+		setGroupControlValue( newGroupControlValue );
+	}, [ order?.value ] );
+
 	const handleToggleButtonChange = ( group: GroupControlItemOption | null ) => {
 		setGroupControlValue( group );
 

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ControlFormLabel, useBoundProp } from '@elementor/editor-controls';
 import type { Control, ControlsSection } from '@elementor/editor-elements';
-import { PopoverHeader, PopoverScrollableContent } from '@elementor/editor-ui';
+import { PopoverHeader } from '@elementor/editor-ui';
 import { DatabaseIcon, SettingsIcon, XIcon } from '@elementor/icons';
 import {
 	bindPopover,
@@ -21,6 +21,7 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { PopoverBody } from '../../components/popover-body';
 import { Control as BaseControl } from '../../controls-registry/control';
 import { type ControlType, getControl } from '../../controls-registry/controls-registry';
 import { usePersistDynamicValue } from '../../hooks/use-persist-dynamic-value';
@@ -82,9 +83,9 @@ export const DynamicSelectionControl = () => {
 				} }
 				{ ...bindPopover( selectionPopoverState ) }
 			>
-				<Stack>
+				<PopoverBody>
 					<DynamicSelection close={ selectionPopoverState.close } />
-				</Stack>
+				</PopoverBody>
 			</Popover>
 		</Box>
 	);
@@ -107,18 +108,21 @@ export const DynamicSettingsPopover = ( { dynamicTag }: { dynamicTag: DynamicTag
 			<Popover
 				disablePortal
 				disableScrollLock
-				anchorOrigin={ { vertical: 'bottom', horizontal: 'center' } }
+				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
+				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
 				PaperProps={ {
-					sx: { my: 0.5 },
+					sx: { my: 1 },
 				} }
 				{ ...bindPopover( popupState ) }
 			>
-				<PopoverHeader
-					title={ dynamicTag.label }
-					onClose={ popupState.close }
-					icon={ <DatabaseIcon fontSize={ SIZE } /> }
-				/>
-				<DynamicSettings controls={ dynamicTag.atomic_controls } />
+				<PopoverBody>
+					<PopoverHeader
+						title={ dynamicTag.label }
+						onClose={ popupState.close }
+						icon={ <DatabaseIcon fontSize={ SIZE } /> }
+					/>
+					<DynamicSettings controls={ dynamicTag.atomic_controls } />
+				</PopoverBody>
 			</Popover>
 		</>
 	);
@@ -134,7 +138,7 @@ const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls
 	}
 
 	return (
-		<PopoverScrollableContent>
+		<>
 			<Tabs size="small" variant="fullWidth" { ...getTabsProps() }>
 				{ tabs.map( ( { value }, index ) => (
 					<Tab key={ index } label={ value.label } sx={ { px: 1, py: 0.5 } } { ...getTabProps( index ) } />
@@ -144,7 +148,11 @@ const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls
 
 			{ tabs.map( ( { value }, index ) => {
 				return (
-					<TabPanel key={ index } sx={ { flexGrow: 1, py: 0 } } { ...getTabPanelProps( index ) }>
+					<TabPanel
+						key={ index }
+						sx={ { flexGrow: 1, py: 0, overflowY: 'auto' } }
+						{ ...getTabPanelProps( index ) }
+					>
 						<Stack p={ 2 } gap={ 2 }>
 							{ value.items.map( ( item ) => {
 								if ( item.type === 'control' ) {
@@ -156,7 +164,7 @@ const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls
 					</TabPanel>
 				);
 			} ) }
-		</PopoverScrollableContent>
+		</>
 	);
 };
 

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

@@ -3,10 +3,10 @@ import * as React from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
 import { PopoverHeader, PopoverMenuList, PopoverSearch } from '@elementor/editor-ui';
 import { DatabaseIcon } from '@elementor/icons';
-import { Box, Divider, Link, Stack, Typography, useTheme } from '@elementor/ui';
+import { Divider, Link, Stack, Typography, useTheme } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { PopoverScrollableContent } from '../../components/popover-scrollable-content';
+import { PopoverBody } from '../../components/popover-body';
 import { usePersistDynamicValue } from '../../hooks/use-persist-dynamic-value';
 import { usePropDynamicTags } from '../hooks/use-prop-dynamic-tags';
 import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
@@ -76,43 +76,39 @@ export const DynamicSelection = ( { close: closePopover }: DynamicSelectionProps
 	] );
 
 	return (
-		<>
+		<PopoverBody>
 			<PopoverHeader
 				title={ __( 'Dynamic tags', 'elementor' ) }
 				onClose={ closePopover }
 				icon={ <DatabaseIcon fontSize={ SIZE } /> }
 			/>
-			<Stack>
-				{ hasNoDynamicTags ? (
-					<NoDynamicTags />
-				) : (
-					<Fragment>
-						<PopoverSearch
-							value={ searchValue }
-							onSearch={ handleSearch }
-							placeholder={ __( 'Search dynamic tags…', 'elementor' ) }
-						/>
-
-						<Divider />
-
-						<PopoverScrollableContent>
-							<PopoverMenuList
-								items={ virtualizedItems }
-								onSelect={ handleSetDynamicTag }
-								onClose={ closePopover }
-								selectedValue={ dynamicValue?.name }
-								itemStyle={ ( item ) =>
-									item.type === 'item' ? { paddingInlineStart: theme.spacing( 3.5 ) } : {}
-								}
-								noResultsComponent={
-									<NoResults searchValue={ searchValue } onClear={ () => setSearchValue( '' ) } />
-								}
-							/>
-						</PopoverScrollableContent>
-					</Fragment>
-				) }
-			</Stack>
-		</>
+			{ hasNoDynamicTags ? (
+				<NoDynamicTags />
+			) : (
+				<Fragment>
+					<PopoverSearch
+						value={ searchValue }
+						onSearch={ handleSearch }
+						placeholder={ __( 'Search dynamic tags…', 'elementor' ) }
+					/>
+
+					<Divider />
+
+					<PopoverMenuList
+						items={ virtualizedItems }
+						onSelect={ handleSetDynamicTag }
+						onClose={ closePopover }
+						selectedValue={ dynamicValue?.name }
+						itemStyle={ ( item ) =>
+							item.type === 'item' ? { paddingInlineStart: theme.spacing( 3.5 ) } : {}
+						}
+						noResultsComponent={
+							<NoResults searchValue={ searchValue } onClear={ () => setSearchValue( '' ) } />
+						}
+					/>
+				</Fragment>
+			) }
+		</PopoverBody>
 	);
 };
 
@@ -142,7 +138,7 @@ const NoResults = ( { searchValue, onClear }: NoResultsProps ) => (
 );
 
 const NoDynamicTags = () => (
-	<Box sx={ { overflowY: 'hidden', height: 297, width: 220 } }>
+	<>
 		<Divider />
 		<Stack
 			gap={ 1 }
@@ -161,7 +157,7 @@ const NoDynamicTags = () => (
 				{ __( "You'll need Elementor Pro to use this feature.", 'elementor' ) }
 			</Typography>
 		</Stack>
-	</Box>
+	</>
 );
 
 const useFilteredOptions = ( searchValue: string ): OptionEntry[] => {

package/src/index.ts

@@ -9,7 +9,7 @@ export { usePanelActions, usePanelStatus } from './panel';
 export { type ValidationResult, type ValidationEvent } from './components/creatable-autocomplete';
 export { controlActionsMenu } from './controls-actions';
 export { useFontFamilies } from './components/style-sections/typography-section/hooks/use-font-families';
-export { PopoverScrollableContent } from './components/popover-scrollable-content';
+export { PopoverBody } from './components/popover-body';
 export { useSectionWidth } from './contexts/section-context';
 
 export { init } from './init';

package/src/reset-style-props.tsx

@@ -15,7 +15,7 @@ export function initResetStyleProps() {
 }
 
 // Temporary fix for the issue with ControlToggleButtonGroup.
-const EXCLUDED_BINDS = [ 'order', 'flex-grow', 'flex-shrink', 'flex-basis' ];
+const EXCLUDED_BINDS = [ 'flex-grow', 'flex-shrink', 'flex-basis' ];
 
 export function useResetStyleValueProps() {
 	const isStyle = useIsStyle();

package/src/styles-inheritance/components/styles-inheritance-infotip.tsx

@@ -41,7 +41,7 @@ export const StylesInheritanceInfotip = ( { inheritanceChain, propType, path, la
 
 	const key = path.join( '.' );
 
-	const sectionWidth = useSectionWidth() + SECTION_PADDING_INLINE;
+	const sectionWidth = useSectionWidth();
 
 	const resolve = useMemo< PropsResolver >( () => {
 		return createPropsResolver( {

package/src/utils/get-styles-provider-color.ts

@@ -26,3 +26,11 @@ export const getStylesProviderThemeColor = ( provider: string ): ( ( theme: Them
 
 	return getStyleProviderColors( provider ).getThemeColor;
 };
+
+export function getTempStylesProviderThemeColor( provider: string ): ( ( theme: Theme ) => string ) | null {
+	if ( isElementsStylesProvider( provider ) ) {
+		return ( theme: Theme ) => theme.palette.primary.main;
+	}
+
+	return getStylesProviderThemeColor( provider );
+}

package/src/components/popover-scrollable-content.tsx

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { PopoverScrollableContent as BasePopoverScrollableContent } from '@elementor/editor-ui';
-
-import { useSectionWidth } from '../contexts/section-context';
-
-type Props = React.ComponentProps< typeof BasePopoverScrollableContent >;
-
-export const PopoverScrollableContent = ( props: Props ) => {
-	const sectionWidth = useSectionWidth();
-
-	return <BasePopoverScrollableContent { ...props } width={ sectionWidth } />;
-};