@elementor/editor-components 3.35.0-360 → 3.35.0-362

package/package.json

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

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

@@ -1,17 +1,16 @@
 import * as React from 'react';
 import { getV1DocumentsManager } from '@elementor/editor-documents';
 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';
 
 import { useNavigateBack } from '../../hooks/use-navigate-back';
-import { selectCurrentComponentId } from '../../store/store';
+import { useCurrentComponentId } from '../../store/store';
 import { ComponentsBadge } from './component-badge';
 import { useOverridableProps } from './use-overridable-props';
 
 export const ComponentPanelHeader = () => {
-	const currentComponentId = useSelector( selectCurrentComponentId );
+	const currentComponentId = useCurrentComponentId();
 	const overridableProps = useOverridableProps( currentComponentId );
 	const onBack = useNavigateBack();
 	const componentName = getComponentName();

package/src/components/edit-component/component-modal.tsx

@@ -10,6 +10,7 @@ type ModalProps = {
 	element: HTMLElement;
 	onClose: () => void;
 };
+
 export function ComponentModal( { element, onClose }: ModalProps ) {
 	const canvasDocument = useCanvasDocument();
 

package/src/components/edit-component/edit-component.tsx

@@ -4,20 +4,23 @@ import { getV1DocumentsManager, type V1Document } from '@elementor/editor-docume
 import { type V1Element } from '@elementor/editor-elements';
 import { __privateListenTo as listenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
 import { __useSelector as useSelector } from '@elementor/store';
+import { throttle } from '@elementor/utils';
 
 import { apiClient } from '../../api';
 import { useNavigateBack } from '../../hooks/use-navigate-back';
 import { updateCurrentComponent } from '../../store/actions/update-current-component';
-import { type ComponentsPathItem, selectCurrentComponentId, selectPath } from '../../store/store';
+import { type ComponentsPathItem, selectPath, useCurrentComponentId } from '../../store/store';
 import { COMPONENT_DOCUMENT_TYPE } from '../consts';
 import { ComponentModal } from './component-modal';
 
 export function EditComponent() {
-	const currentComponentId = useSelector( selectCurrentComponentId );
+	const currentComponentId = useCurrentComponentId();
 
 	useHandleDocumentSwitches();
 
-	const onBack = useNavigateBack();
+	const navigateBack = useNavigateBack();
+
+	const onClose = throttle( navigateBack, 100 );
 
 	const elementDom = getComponentDOMElement( currentComponentId ?? undefined );
 
@@ -25,16 +28,16 @@ export function EditComponent() {
 		return null;
 	}
 
-	return <ComponentModal element={ elementDom } onClose={ onBack } />;
+	return <ComponentModal element={ elementDom } onClose={ onClose } />;
 }
 
 function useHandleDocumentSwitches() {
 	const documentsManager = getV1DocumentsManager();
-	const currentComponentId = useSelector( selectCurrentComponentId );
+	const currentComponentId = useCurrentComponentId();
 	const path = useSelector( selectPath );
 
 	useEffect( () => {
-		return listenTo( commandEndEvent( 'editor/documents/attach-preview' ), () => {
+		return listenTo( commandEndEvent( 'editor/documents/open' ), () => {
 			const nextDocument = documentsManager.getCurrent();
 
 			if ( nextDocument.id === currentComponentId ) {

package/src/components/overridable-props/overridable-prop-control.tsx

@@ -3,7 +3,6 @@ import { type ComponentType } from 'react';
 import { ControlReplacementsProvider, PropKeyProvider, PropProvider, useBoundProp } from '@elementor/editor-controls';
 import { createTopLevelObjectType, useElement } from '@elementor/editor-editing-panel';
 import { type PropValue } from '@elementor/editor-props';
-import { __getState as getState } from '@elementor/store';
 
 import {
 	componentOverridablePropTypeUtil,
@@ -11,7 +10,7 @@ import {
 } from '../../prop-types/component-overridable-prop-type';
 import { OverridablePropProvider } from '../../provider/overridable-prop-context';
 import { updateOverridablePropOriginValue } from '../../store/actions/update-overridable-prop-origin-value';
-import { selectCurrentComponentId } from '../../store/store';
+import { useCurrentComponentId } from '../../store/store';
 
 export function OverridablePropControl< T extends object >( {
 	OriginalControl,
@@ -20,10 +19,10 @@ export function OverridablePropControl< T extends object >( {
 	const { elementType } = useElement();
 
 	const { value, bind, setValue, placeholder, ...propContext } = useBoundProp( componentOverridablePropTypeUtil );
-	const componentId = selectCurrentComponentId( getState() );
+	const componentId = useCurrentComponentId();
 
 	if ( ! componentId ) {
-		throw new Error( 'Component ID is required' );
+		return null;
 	}
 
 	if ( ! value?.override_key ) {

package/src/components/overridable-props/overridable-prop-indicator.tsx

@@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n';
 import { componentOverridablePropTypeUtil } from '../../prop-types/component-overridable-prop-type';
 import { useOverridablePropValue } from '../../provider/overridable-prop-context';
 import { setOverridableProp } from '../../store/actions/set-overridable-prop';
-import { selectCurrentComponentId, selectOverridableProps } from '../../store/store';
+import { selectOverridableProps, useCurrentComponentId } from '../../store/store';
 import { type OverridableProps } from '../../types';
 import { Indicator } from './indicator';
 import { OverridablePropForm } from './overridable-prop-form';
@@ -20,7 +20,7 @@ const FORBIDDEN_KEYS = [ '_cssid', 'attributes' ];
 
 export function OverridablePropIndicator() {
 	const { bind } = useBoundProp();
-	const componentId = selectCurrentComponentId( getState() );
+	const componentId = useCurrentComponentId();
 
 	if ( ! isPropAllowed( bind ) || ! componentId ) {
 		return null;

package/src/store/store.ts

@@ -2,6 +2,7 @@ import { type V1Document } from '@elementor/editor-documents';
 import {
 	__createSelector as createSelector,
 	__createSlice as createSlice,
+	__useSelector as useSelector,
 	type PayloadAction,
 	type SliceState,
 } from '@elementor/store';
@@ -186,11 +187,16 @@ export const selectIsOverridablePropsLoaded = createSelector(
 	}
 );
 export const selectPath = createSelector( getPath, ( path ) => path );
+
 export const selectCurrentComponentId = createSelector(
 	getCurrentComponentId,
 	( currentComponentId ) => currentComponentId
 );
 
+export const useCurrentComponentId = () => {
+	return useSelector( selectCurrentComponentId );
+};
+
 export const selectArchivedComponents = createSelector(
 	selectArchivedData,
 	( archivedData: PublishedComponent[] ) => archivedData