@elementor/editor-editing-panel 4.1.0-827 → 4.1.0-828

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "4.1.0-827",
+  "version": "4.1.0-828",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,31 +39,31 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.1.0-827",
-    "@elementor/editor-canvas": "4.1.0-827",
-    "@elementor/editor-controls": "4.1.0-827",
-    "@elementor/editor-documents": "4.1.0-827",
-    "@elementor/editor-elements": "4.1.0-827",
-    "@elementor/editor-interactions": "4.1.0-827",
-    "@elementor/editor-notifications": "4.1.0-827",
-    "@elementor/editor-panels": "4.1.0-827",
-    "@elementor/editor-props": "4.1.0-827",
-    "@elementor/editor-responsive": "4.1.0-827",
-    "@elementor/editor-styles": "4.1.0-827",
-    "@elementor/editor-styles-repository": "4.1.0-827",
-    "@elementor/editor-ui": "4.1.0-827",
-    "@elementor/editor-v1-adapters": "4.1.0-827",
-    "@elementor/http-client": "4.1.0-827",
+    "@elementor/editor": "4.1.0-828",
+    "@elementor/editor-canvas": "4.1.0-828",
+    "@elementor/editor-controls": "4.1.0-828",
+    "@elementor/editor-documents": "4.1.0-828",
+    "@elementor/editor-elements": "4.1.0-828",
+    "@elementor/editor-interactions": "4.1.0-828",
+    "@elementor/editor-notifications": "4.1.0-828",
+    "@elementor/editor-panels": "4.1.0-828",
+    "@elementor/editor-props": "4.1.0-828",
+    "@elementor/editor-responsive": "4.1.0-828",
+    "@elementor/editor-styles": "4.1.0-828",
+    "@elementor/editor-styles-repository": "4.1.0-828",
+    "@elementor/editor-ui": "4.1.0-828",
+    "@elementor/editor-v1-adapters": "4.1.0-828",
+    "@elementor/http-client": "4.1.0-828",
     "@elementor/icons": "^1.68.0",
-    "@elementor/editor-variables": "4.1.0-827",
-    "@elementor/locations": "4.1.0-827",
-    "@elementor/menus": "4.1.0-827",
-    "@elementor/query": "4.1.0-827",
-    "@elementor/schema": "4.1.0-827",
-    "@elementor/session": "4.1.0-827",
+    "@elementor/editor-variables": "4.1.0-828",
+    "@elementor/locations": "4.1.0-828",
+    "@elementor/menus": "4.1.0-828",
+    "@elementor/query": "4.1.0-828",
+    "@elementor/schema": "4.1.0-828",
+    "@elementor/session": "4.1.0-828",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.1.0-827",
-    "@elementor/wp-media": "4.1.0-827",
+    "@elementor/utils": "4.1.0-828",
+    "@elementor/wp-media": "4.1.0-828",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/section-content.tsx

@@ -8,10 +8,17 @@ type SectionContentProps = PropsWithChildren< {
 		pt?: number;
 	};
 	'aria-label'?: string;
+	className?: string;
 } >;
 
-export const SectionContent: FC< SectionContentProps > = ( { gap = 2, sx, children, 'aria-label': ariaLabel } ) => (
-	<Stack gap={ gap } sx={ { ...sx } } aria-label={ ariaLabel }>
+export const SectionContent: FC< SectionContentProps > = ( {
+	gap = 2,
+	sx,
+	children,
+	'aria-label': ariaLabel,
+	className,
+} ) => (
+	<Stack gap={ gap } sx={ { ...sx } } aria-label={ ariaLabel } className={ className }>
 		{ children }
 	</Stack>
 );

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

@@ -15,15 +15,11 @@ const positionOptions = [
 	{ label: __( 'Sticky', 'elementor' ), value: 'sticky' },
 ];
 
-type Props = {
-	onChange?: ( newValue: string | null, previousValue: string | null | undefined ) => void;
-};
-
-export const PositionField = ( { onChange }: Props ) => {
+export const PositionField = () => {
 	return (
 		<StylesField bind="position" propDisplayName={ POSITION_LABEL }>
 			<StylesFieldLayout label={ POSITION_LABEL }>
-				<SelectControl options={ positionOptions } onChange={ onChange } />
+				<SelectControl options={ positionOptions } />
 			</StylesFieldLayout>
 		</StylesField>
 	);

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { useCallback, useEffect, useRef } from 'react';
-import { type StringPropValue } from '@elementor/editor-props';
+import { useEffect, useRef } from 'react';
+import { type NumberPropValue, type SizePropValue, type StringPropValue } from '@elementor/editor-props';
 import { useSessionStorage } from '@elementor/session';
+import { styled } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useStyle } from '../../../contexts/style-context';
@@ -14,112 +15,62 @@ import { OffsetField } from './offset-field';
 import { PositionField } from './position-field';
 import { ZIndexField } from './z-index-field';
 
-type DimensionValue =
-	| {
-			$$type: 'size';
-			value: number;
-	  }
-	| undefined
-	| null;
-
-type DimensionsValues = {
-	'inset-block-start': DimensionValue;
-	'inset-block-end': DimensionValue;
-	'inset-inline-start': DimensionValue;
-	'inset-inline-end': DimensionValue;
+type DependentValues = {
+	'inset-block-start'?: SizePropValue | null;
+	'inset-block-end'?: SizePropValue | null;
+	'inset-inline-start'?: SizePropValue | null;
+	'inset-inline-end'?: SizePropValue | null;
+	'z-index'?: NumberPropValue | null;
 };
 
-type PositionDependentValues = DimensionsValues & {
-	'z-index': number | undefined | null;
-};
-
-const POSITION_STATIC = 'static' as const;
+const POSITION_STATIC = 'static';
 
 const POSITION_LABEL = __( 'Position', 'elementor' );
 const DIMENSIONS_LABEL = __( 'Dimensions', 'elementor' );
 
-const POSITION_DEPENDENT_PROP_NAMES = [
+const DEPENDENT_PROP_NAMES: Array< keyof DependentValues > = [
 	'inset-block-start',
 	'inset-block-end',
 	'inset-inline-start',
 	'inset-inline-end',
 	'z-index',
-] as const;
-
-const CLEARED_POSITION_DEPENDENT_VALUES: Record< ( typeof POSITION_DEPENDENT_PROP_NAMES )[ number ], null > = {
-	'inset-block-start': null,
-	'inset-block-end': null,
-	'inset-inline-start': null,
-	'inset-inline-end': null,
-	'z-index': null,
-};
+];
 
 export const PositionSection = () => {
-	const { value: positionValue } = useStylesField< StringPropValue >( 'position', {
-		history: { propDisplayName: POSITION_LABEL },
-	} );
-	const { values: positionDependentValues, setValues: setPositionDependentValues } =
-		useStylesFields< PositionDependentValues >( [ ...POSITION_DEPENDENT_PROP_NAMES ] );
-
-	const [ dimensionsValuesFromHistory, updateDimensionsHistory, clearDimensionsHistory ] = usePersistDimensions();
-
-	const clearPositionDependentProps = useCallback( () => {
-		const dimensions: DimensionsValues = {
-			'inset-block-start': positionDependentValues?.[ 'inset-block-start' ],
-			'inset-block-end': positionDependentValues?.[ 'inset-block-end' ],
-			'inset-inline-start': positionDependentValues?.[ 'inset-inline-start' ],
-			'inset-inline-end': positionDependentValues?.[ 'inset-inline-end' ],
-		};
-		const meta = { history: { propDisplayName: DIMENSIONS_LABEL } };
-		const hasValuesToClear =
-			Object.values( dimensions ).some( ( v ) => v !== null ) || positionDependentValues?.[ 'z-index' ] !== null;
+	const { value: position } = useStylesField< StringPropValue >( 'position', withHistoryLabel( POSITION_LABEL ) );
+	const positionPrevRef = useRef( position );
+	const { values: dependentValues, setValues: setDependentValues } =
+		useStylesFields< DependentValues >( DEPENDENT_PROP_NAMES );
+
+	const [ savedDependentValues, saveToHistory, clearHistory ] = usePersistDimensions();
 
-		if ( hasValuesToClear ) {
-			updateDimensionsHistory( dimensions );
-			setPositionDependentValues( CLEARED_POSITION_DEPENDENT_VALUES, meta );
+	useEffect( () => {
+		if ( position && position?.value === POSITION_STATIC && hasDependentValues( dependentValues ) ) {
+			saveToHistory( extractDimensions( dependentValues ) );
 		}
-	}, [ positionDependentValues, updateDimensionsHistory, setPositionDependentValues ] );
 
-	const clearPositionDependentPropsRef = useRef( clearPositionDependentProps );
-	clearPositionDependentPropsRef.current = clearPositionDependentProps;
+		if ( positionPrevRef.current?.value === POSITION_STATIC ) {
+			setDependentValues( { ...savedDependentValues }, withHistoryLabel( DIMENSIONS_LABEL ) );
 
-	useEffect( () => {
-		if ( positionValue?.value === POSITION_STATIC || positionValue === null ) {
-			clearPositionDependentPropsRef.current();
+			clearHistory();
 		}
-	}, [ positionValue ] );
-
-	const onPositionChange = ( newPosition: string | null, previousPosition: string | null | undefined ) => {
-		const meta = { history: { propDisplayName: DIMENSIONS_LABEL } };
-
-		if ( newPosition === POSITION_STATIC ) {
-			clearPositionDependentProps();
-		} else if ( previousPosition === POSITION_STATIC ) {
-			if ( dimensionsValuesFromHistory ) {
-				setPositionDependentValues(
-					{ ...dimensionsValuesFromHistory, 'z-index': undefined } as PositionDependentValues,
-					meta
-				);
-				clearDimensionsHistory();
-			}
+
+		if ( ( ! position || position?.value === POSITION_STATIC ) && dependentValues?.[ 'z-index' ] ) {
+			setDependentValues( { 'z-index': null }, withHistoryLabel( DIMENSIONS_LABEL ) );
 		}
-	};
 
-	const isNotStatic = positionValue && positionValue?.value !== POSITION_STATIC;
+		positionPrevRef.current = position;
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ position?.value ] );
 
 	return (
-		<SectionContent>
-			<PositionField onChange={ onPositionChange } />
-			{ isNotStatic ? (
-				<>
-					<DimensionsField />
-				</>
-			) : null }
-
-			<ZIndexField disabled={ ! isNotStatic } />
+		<StyledSectionContent>
+			<PositionField />
+			<DimensionsField />
+			<ZIndexField disabled={ ! position || position?.value === POSITION_STATIC } />
 			<PanelDivider />
 			<OffsetField />
-		</SectionContent>
+		</StyledSectionContent>
 	);
 };
 
@@ -128,5 +79,51 @@ const usePersistDimensions = () => {
 	const styleVariantPath = `styles/${ styleDefID }/${ meta.breakpoint || 'desktop' }/${ meta.state || 'null' }`;
 	const dimensionsPath = `${ styleVariantPath }/dimensions`;
 
-	return useSessionStorage< DimensionsValues >( dimensionsPath );
+	return useSessionStorage< DependentValues >( dimensionsPath );
+};
+
+const withHistoryLabel = ( name: string ) => {
+	return {
+		history: { propDisplayName: name },
+	};
+};
+
+const hasDependentValues = ( values?: DependentValues | null ) => {
+	if ( ! values ) {
+		return false;
+	}
+
+	const dimensions = extractDimensions( values );
+
+	return Object.values( dimensions ).some( ( v ) => v !== null );
 };
+
+const extractDimensions = ( values: DependentValues | null ): DependentValues => {
+	return DEPENDENT_PROP_NAMES.reduce( ( acc, key ) => {
+		return {
+			...acc,
+			[ key ]: values?.[ key ] ?? null,
+		};
+	}, {} );
+};
+
+const StyledSectionContent = styled( SectionContent, {
+	shouldForwardProp: ( prop ) => prop !== 'gap',
+} )< { gap?: number } >( ( { gap = 2, theme } ) => ( {
+	gap: 0,
+	'& > *': {
+		marginBottom: theme.spacing( gap ),
+	},
+	'& > *:last-child': {
+		marginBottom: 0,
+	},
+	'& > .MuiStack-root': {
+		marginBottom: 0,
+	},
+	'& > .MuiStack-root:has(> *)': {
+		marginBottom: theme.spacing( gap ),
+	},
+	'& > .MuiDivider-root': {
+		marginBottom: theme.spacing( gap ),
+	},
+} ) );

package/src/controls-registry/conditional-field.tsx

@@ -53,7 +53,10 @@ function useSyncDepsWithInherited( {
 	useEffect( () => {
 		const { hasSynced, prevDepValues } = syncRef.current;
 
-		if ( hasSynced && value && wasDepsCleared( prevDepValues, depValues ) ) {
+		if (
+			( hasSynced && value && wasDepsCleared( prevDepValues, depValues ) ) ||
+			( isHidden && depValues && value )
+		) {
 			resetValue();
 		}