@elementor/editor-components 3.35.0-465 → 3.35.0-467

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "3.35.0-465",
+  "version": "3.35.0-467",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,30 +40,30 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.35.0-465",
-    "@elementor/editor-canvas": "3.35.0-465",
-    "@elementor/editor-controls": "3.35.0-465",
-    "@elementor/editor-documents": "3.35.0-465",
-    "@elementor/editor-editing-panel": "3.35.0-465",
-    "@elementor/editor-elements": "3.35.0-465",
-    "@elementor/editor-elements-panel": "3.35.0-465",
-    "@elementor/editor-mcp": "3.35.0-465",
-    "@elementor/editor-panels": "3.35.0-465",
-    "@elementor/editor-props": "3.35.0-465",
-    "@elementor/editor-styles-repository": "3.35.0-465",
-    "@elementor/editor-ui": "3.35.0-465",
-    "@elementor/editor-v1-adapters": "3.35.0-465",
-    "@elementor/http-client": "3.35.0-465",
+    "@elementor/editor": "3.35.0-467",
+    "@elementor/editor-canvas": "3.35.0-467",
+    "@elementor/editor-controls": "3.35.0-467",
+    "@elementor/editor-documents": "3.35.0-467",
+    "@elementor/editor-editing-panel": "3.35.0-467",
+    "@elementor/editor-elements": "3.35.0-467",
+    "@elementor/editor-elements-panel": "3.35.0-467",
+    "@elementor/editor-mcp": "3.35.0-467",
+    "@elementor/editor-panels": "3.35.0-467",
+    "@elementor/editor-props": "3.35.0-467",
+    "@elementor/editor-styles-repository": "3.35.0-467",
+    "@elementor/editor-ui": "3.35.0-467",
+    "@elementor/editor-v1-adapters": "3.35.0-467",
+    "@elementor/http-client": "3.35.0-467",
     "@elementor/icons": "^1.63.0",
-    "@elementor/mixpanel": "3.35.0-465",
-    "@elementor/query": "3.35.0-465",
-    "@elementor/schema": "3.35.0-465",
-    "@elementor/store": "3.35.0-465",
+    "@elementor/mixpanel": "3.35.0-467",
+    "@elementor/query": "3.35.0-467",
+    "@elementor/schema": "3.35.0-467",
+    "@elementor/store": "3.35.0-467",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-465",
+    "@elementor/utils": "3.35.0-467",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "3.35.0-465",
-    "@elementor/editor-current-user": "3.35.0-465"
+    "@elementor/editor-notifications": "3.35.0-467",
+    "@elementor/editor-current-user": "3.35.0-467"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/components/component-panel-header/component-badge.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useEffect, useRef } from 'react';
 import { ComponentPropListIcon } from '@elementor/icons';
-import { Badge, Box, keyframes, styled, ToggleButton } from '@elementor/ui';
+import { Badge, Box, keyframes, styled, ToggleButton, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 export const ComponentsBadge = React.forwardRef<
@@ -26,14 +26,16 @@ export const ComponentsBadge = React.forwardRef<
 				</Box>
 			}
 		>
-			<ToggleButton
-				value="exposed properties"
-				size="tiny"
-				onClick={ onClick }
-				aria-label={ __( 'View exposed properties', 'elementor' ) }
-			>
-				<ComponentPropListIcon fontSize="tiny" />
-			</ToggleButton>
+			<Tooltip title={ __( 'Component properties', 'elementor' ) }>
+				<ToggleButton
+					value="exposed properties"
+					size="tiny"
+					onClick={ onClick }
+					aria-label={ __( 'Component properties', 'elementor' ) }
+				>
+					<ComponentPropListIcon fontSize="tiny" />
+				</ToggleButton>
+			</Tooltip>
 		</StyledBadge>
 	);
 } );

package/src/store/actions/delete-overridable-prop.ts

@@ -1,7 +1,7 @@
-import { getContainer, updateElementSettings } from '@elementor/editor-elements';
 import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
 
 import { type ComponentId } from '../../types';
+import { revertElementOverridableSetting } from '../../utils/revert-element-overridable-setting';
 import { type Source, trackComponentEvent } from '../../utils/tracking';
 import { selectCurrentComponent, selectOverridableProps, slice } from '../store';
 import { removePropFromAllGroups } from '../utils/groups-transformers';
@@ -25,7 +25,7 @@ export function deleteOverridableProp( { componentId, propKey, source }: DeleteP
 		return;
 	}
 
-	revertElementSetting( prop.elementId, prop.propKey, prop.originValue );
+	revertElementOverridableSetting( prop.elementId, prop.propKey, prop.originValue, propKey );
 
 	const { [ propKey ]: removedProp, ...remainingProps } = overridableProps.props;
 
@@ -54,17 +54,3 @@ export function deleteOverridableProp( { componentId, propKey, source }: DeleteP
 		element_type: removedProp.widgetType ?? removedProp.elType,
 	} );
 }
-
-function revertElementSetting( elementId: string, settingKey: string, originValue: unknown ): void {
-	const container = getContainer( elementId );
-
-	if ( ! container ) {
-		return;
-	}
-
-	updateElementSettings( {
-		id: elementId,
-		props: { [ settingKey ]: originValue ?? null },
-		withHistory: false,
-	} );
-}

package/src/utils/revert-element-overridable-setting.ts

@@ -0,0 +1,94 @@
+import { getContainer, getElementSetting, updateElementSettings } from '@elementor/editor-elements';
+
+import {
+	type ComponentInstanceOverrideProp,
+	componentInstanceOverridePropTypeUtil,
+} from '../prop-types/component-instance-override-prop-type';
+import {
+	componentInstanceOverridesPropTypeUtil,
+	type ComponentInstanceOverridesPropValue,
+} from '../prop-types/component-instance-overrides-prop-type';
+import {
+	type ComponentInstanceProp,
+	componentInstancePropTypeUtil,
+	type ComponentInstancePropValue,
+} from '../prop-types/component-instance-prop-type';
+import { componentOverridablePropTypeUtil } from '../prop-types/component-overridable-prop-type';
+import { isComponentInstance } from './is-component-instance';
+
+export function revertElementOverridableSetting(
+	elementId: string,
+	settingKey: string,
+	originValue: unknown,
+	overrideKey: string
+): void {
+	const container = getContainer( elementId );
+
+	if ( ! container ) {
+		return;
+	}
+
+	if ( isComponentInstance( container.model.toJSON() ) ) {
+		revertComponentInstanceSetting( elementId, overrideKey );
+
+		return;
+	}
+
+	updateElementSettings( {
+		id: elementId,
+		props: { [ settingKey ]: originValue ?? null },
+		withHistory: false,
+	} );
+}
+
+function revertComponentInstanceSetting( elementId: string, overrideKey: string ): void {
+	const setting = getElementSetting< ComponentInstanceProp >( elementId, 'component_instance' );
+
+	const componentInstance = componentInstancePropTypeUtil.extract( setting );
+	const overrides = componentInstanceOverridesPropTypeUtil.extract( componentInstance?.overrides );
+
+	if ( ! overrides ) {
+		return;
+	}
+
+	const updatedOverrides = getUpdatedComponentInstanceOverrides( overrides, overrideKey );
+
+	const updatedSetting = componentInstancePropTypeUtil.create( {
+		...componentInstance,
+		overrides: componentInstanceOverridesPropTypeUtil.create( updatedOverrides ),
+	} as ComponentInstancePropValue );
+
+	updateElementSettings( {
+		id: elementId,
+		props: { component_instance: updatedSetting },
+		withHistory: false,
+	} );
+}
+
+function getUpdatedComponentInstanceOverrides(
+	overrides: NonNullable< ComponentInstanceOverridesPropValue >,
+	overrideKey: string
+): ComponentInstanceOverridesPropValue {
+	return overrides
+		.map( ( item ) => {
+			const isOverridable = componentOverridablePropTypeUtil.isValid( item );
+			if ( ! isOverridable ) {
+				// we revert only overridable values
+				return item;
+			}
+
+			const isOriginValueOverride = componentInstanceOverridePropTypeUtil.isValid( item.value.origin_value );
+
+			if ( ! isOriginValueOverride ) {
+				// component instances cannot have overridables with origin value that is not an override
+				return null;
+			}
+
+			if ( item.value.override_key !== overrideKey ) {
+				return item;
+			}
+
+			return item.value.origin_value as ComponentInstanceOverrideProp;
+		} )
+		.filter( ( item ): item is NonNullable< typeof item > => item !== null );
+}