@elementor/editor-components 3.35.0-328 → 3.35.0-330

package/package.json

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useEffect, useRef } from 'react';
-import { SettingsIcon } from '@elementor/icons';
+import { ComponentPropListIcon } from '@elementor/icons';
 import { Badge, Box, keyframes, styled, ToggleButton } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -23,7 +23,7 @@ export const ComponentsBadge = ( { overridesCount }: { overridesCount: number }
 			}
 		>
 			<ToggleButton value="overrides" size="tiny" aria-label={ __( 'View overrides', 'elementor' ) }>
-				<SettingsIcon fontSize="tiny" />
+				<ComponentPropListIcon fontSize="tiny" />
 			</ToggleButton>
 		</StyledBadge>
 	);

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { getV1DocumentsManager } from '@elementor/editor-documents';
-import { ArrowLeftIcon, ComponentsIcon } from '@elementor/icons';
+import { ArrowLeftIcon, ComponentsFilledIcon } from '@elementor/icons';
 import { __useSelector as useSelector } from '@elementor/store';
 import { Box, Divider, IconButton, Stack, Tooltip, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -30,14 +30,14 @@ export const ComponentPanelHeader = () => {
 				justifyContent="space-between"
 				sx={ { height: 48, pl: 1.5, pr: 2, py: 1 } }
 			>
-				<Stack direction="row" alignItems="center" gap={ 0.5 }>
+				<Stack direction="row" alignItems="center">
 					<Tooltip title={ __( 'Back', 'elementor' ) }>
 						<IconButton size="tiny" onClick={ onBack } aria-label={ __( 'Back', 'elementor' ) }>
-							<ArrowLeftIcon />
+							<ArrowLeftIcon fontSize="tiny" />
 						</IconButton>
 					</Tooltip>
 					<Stack direction="row" alignItems="center" gap={ 0.5 }>
-						<ComponentsIcon color="secondary" fontSize="tiny" />
+						<ComponentsFilledIcon fontSize="tiny" stroke="currentColor" />
 						<Typography variant="caption" sx={ { fontWeight: 500 } }>
 							{ componentName }
 						</Typography>

package/src/components/create-component-form/utils/replace-element-with-component.ts

@@ -22,7 +22,10 @@ export const createComponentModel = ( component: ComponentInstanceParams ): Omit
 			component_instance: {
 				$$type: 'component-instance',
 				value: {
-					component_id: component.id ?? component.uid,
+					component_id: {
+						$$type: 'number',
+						value: component.id ?? component.uid,
+					},
 				},
 			},
 		},

package/src/create-component-type.ts

@@ -84,7 +84,7 @@ function createComponentView(
 				this.options?.model?.get( 'settings' )?.get( 'component_instance' ) as ComponentInstancePropValue
 			 )?.value;
 
-			return componentInstance.component_id;
+			return componentInstance.component_id.value;
 		}
 
 		getContextMenuGroups() {

package/src/sync/create-components-before-save.ts

@@ -79,7 +79,7 @@ function shouldUpdateElement(
 ): { shouldUpdate: true; newComponentId: number } | { shouldUpdate: false; newComponentId: null } {
 	if ( element.widgetType === 'e-component' ) {
 		const currentComponentId = ( element.settings?.component_instance as ComponentInstancePropValue< string > )
-			?.value?.component_id;
+			?.value?.component_id.value;
 
 		if ( currentComponentId && uidToComponentId.has( currentComponentId ) ) {
 			return { shouldUpdate: true, newComponentId: uidToComponentId.get( currentComponentId ) as number };
@@ -94,7 +94,9 @@ function updateElementComponentId( elementId: string, componentId: number ): voi
 		props: {
 			component_instance: {
 				$$type: 'component-instance',
-				value: { component_id: componentId },
+				value: {
+					component_id: { $$type: 'number', value: componentId },
+				},
 			},
 		},
 		withHistory: false,

package/src/types.ts

@@ -70,14 +70,22 @@ export type ComponentInstancePropValue< TComponentId extends number | string = n
 	TransformablePropValue<
 		'component-instance',
 		{
-			component_id: TComponentId;
-			overrides?: ComponentOverride[];
+			component_id: TransformablePropValue< 'number', TComponentId >;
+			overrides?: TransformablePropValue< 'overrides', ComponentOverrides >;
 		}
 	>;
 
-type ComponentOverride = {
+type ComponentOverrides = TransformablePropValue< 'overrides', ComponentOverride[] >;
+
+type ComponentOverride = TransformablePropValue< 'override', ComponentOverridePropValue >;
+
+type ComponentOverridePropValue = {
 	override_key: string;
-	value: TransformablePropValue< string >;
+	override_value: TransformablePropValue< string >;
+	schema_source: {
+		type: string;
+		id: number;
+	};
 };
 
 export type ComponentOverridable = {

package/src/utils/get-component-ids.ts

@@ -12,7 +12,7 @@ export const getComponentIds = async ( elements: V1ElementData[] ) => {
 
 		if ( isComponent ) {
 			const componentId = ( settings?.component_instance as ComponentInstancePropValue< number > )?.value
-				?.component_id;
+				?.component_id.value;
 
 			const document = await getComponentDocumentData( componentId );