@elementor/editor-editing-panel 3.33.0-237 → 3.33.0-239

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "3.33.0-237",
+  "version": "3.33.0-239",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,27 +39,27 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-237",
-    "@elementor/editor-canvas": "3.33.0-237",
-    "@elementor/editor-controls": "3.33.0-237",
-    "@elementor/editor-documents": "3.33.0-237",
-    "@elementor/editor-elements": "3.33.0-237",
-    "@elementor/editor-interactions": "3.33.0-237",
-    "@elementor/editor-panels": "3.33.0-237",
-    "@elementor/editor-props": "3.33.0-237",
-    "@elementor/editor-responsive": "3.33.0-237",
-    "@elementor/editor-styles": "3.33.0-237",
-    "@elementor/editor-styles-repository": "3.33.0-237",
-    "@elementor/editor-ui": "3.33.0-237",
-    "@elementor/editor-v1-adapters": "3.33.0-237",
+    "@elementor/editor": "3.33.0-239",
+    "@elementor/editor-canvas": "3.33.0-239",
+    "@elementor/editor-controls": "3.33.0-239",
+    "@elementor/editor-documents": "3.33.0-239",
+    "@elementor/editor-elements": "3.33.0-239",
+    "@elementor/editor-interactions": "3.33.0-239",
+    "@elementor/editor-panels": "3.33.0-239",
+    "@elementor/editor-props": "3.33.0-239",
+    "@elementor/editor-responsive": "3.33.0-239",
+    "@elementor/editor-styles": "3.33.0-239",
+    "@elementor/editor-styles-repository": "3.33.0-239",
+    "@elementor/editor-ui": "3.33.0-239",
+    "@elementor/editor-v1-adapters": "3.33.0-239",
     "@elementor/icons": "1.56.0",
-    "@elementor/locations": "3.33.0-237",
-    "@elementor/menus": "3.33.0-237",
-    "@elementor/schema": "3.33.0-237",
-    "@elementor/session": "3.33.0-237",
+    "@elementor/locations": "3.33.0-239",
+    "@elementor/menus": "3.33.0-239",
+    "@elementor/schema": "3.33.0-239",
+    "@elementor/session": "3.33.0-239",
     "@elementor/ui": "1.36.15",
-    "@elementor/utils": "3.33.0-237",
-    "@elementor/wp-media": "3.33.0-237",
+    "@elementor/utils": "3.33.0-239",
+    "@elementor/wp-media": "3.33.0-239",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/controls-registry/element-controls/tabs-control/actions.ts

@@ -2,13 +2,10 @@ import { type ItemActionPayload } from '@elementor/editor-controls';
 import {
 	createElements,
 	duplicateElements,
-	generateElementId,
-	getElementSetting,
+	getContainer,
 	moveElements,
 	removeElements,
-	updateElementSettings,
 } from '@elementor/editor-elements';
-import { stringPropTypeUtil, type StringPropValue } from '@elementor/editor-props';
 import { __ } from '@wordpress/i18n';
 
 export type TabItem = {
@@ -19,11 +16,17 @@ export type TabItem = {
 export const TAB_ELEMENT_TYPE = 'e-tab';
 export const TAB_CONTENT_ELEMENT_TYPE = 'e-tab-content';
 
-export const duplicateItem = ( { items }: { items: ItemActionPayload< TabItem > } ) => {
-	items.forEach( ( { item } ) => {
+export const duplicateItem = ( {
+	items,
+	tabContentAreaId,
+}: {
+	items: ItemActionPayload< TabItem >;
+	tabContentAreaId: string;
+} ) => {
+	items.forEach( ( { item, index } ) => {
 		const tabId = item.id as string;
-
-		const { value: tabContentId } = getElementSetting< StringPropValue >( tabId, 'tab-content-id' ) ?? {};
+		const tabContentAreaContainer = getContainer( tabContentAreaId );
+		const tabContentId = tabContentAreaContainer?.children?.[ index ]?.id;
 
 		if ( ! tabContentId ) {
 			throw new Error( 'Original content ID is required for duplication' );
@@ -32,27 +35,6 @@ export const duplicateItem = ( { items }: { items: ItemActionPayload< TabItem >
 		duplicateElements( {
 			elementIds: [ tabId, tabContentId ],
 			title: __( 'Duplicate Tab', 'elementor' ),
-			onCreate: ( duplicatedElements ) => {
-				const tab = duplicatedElements.find( ( element ) => element.originalElementId === tabId );
-				const tabContent = duplicatedElements.find( ( element ) => element.originalElementId === tabContentId );
-
-				if ( tabContent && tab ) {
-					updateElementSettings( {
-						withHistory: false,
-						id: tab.id,
-						props: {
-							'tab-content-id': stringPropTypeUtil.create( tabContent.id ),
-						},
-					} );
-					updateElementSettings( {
-						withHistory: false,
-						id: tabContent.id,
-						props: {
-							'tab-id': stringPropTypeUtil.create( tab.id ),
-						},
-					} );
-				}
-			},
 		} );
 	} );
 };
@@ -62,16 +44,19 @@ export const moveItem = ( {
 	tabsMenuId,
 	tabContentAreaId,
 	movedElementId,
+	movedElementIndex,
 }: {
 	toIndex: number;
 	tabsMenuId: string;
 	tabContentAreaId: string;
 	movedElementId: string;
+	movedElementIndex: number;
 } ) => {
-	const { value: tabContentId } = getElementSetting< StringPropValue >( movedElementId, 'tab-content-id' ) ?? {};
+	const tabContentContainer = getContainer( tabContentAreaId );
+	const tabContentId = tabContentContainer?.children?.[ movedElementIndex ]?.id;
 
 	if ( ! tabContentId ) {
-		throw new Error( 'Required tab elements not found for reordering' );
+		throw new Error( 'Content ID is required' );
 	}
 
 	moveElements( {
@@ -91,12 +76,19 @@ export const moveItem = ( {
 	} );
 };
 
-export const removeItem = ( { items }: { items: ItemActionPayload< TabItem > } ) => {
+export const removeItem = ( {
+	items,
+	tabContentAreaId,
+}: {
+	items: ItemActionPayload< TabItem >;
+	tabContentAreaId: string;
+} ) => {
 	removeElements( {
 		title: __( 'Tabs', 'elementor' ),
-		elementIds: items.flatMap( ( { item } ) => {
+		elementIds: items.flatMap( ( { item, index } ) => {
 			const tabId = item.id as string;
-			const { value: tabContentId } = getElementSetting< StringPropValue >( tabId, 'tab-content-id' ) ?? {};
+			const tabContentContainer = getContainer( tabContentAreaId );
+			const tabContentId = tabContentContainer?.children?.[ index ]?.id;
 
 			if ( ! tabContentId ) {
 				throw new Error( 'Content ID is required' );
@@ -116,33 +108,21 @@ export const addItem = ( {
 	tabsMenuId: string;
 	items: ItemActionPayload< TabItem >;
 } ) => {
-	items.forEach( ( { item, index } ) => {
-		const newTabContentId = generateElementId();
-		const newTabId = generateElementId();
-
+	items.forEach( ( { index } ) => {
 		createElements( {
 			title: __( 'Tabs', 'elementor' ),
 			elements: [
 				{
 					containerId: tabContentAreaId,
 					model: {
-						id: newTabContentId,
 						elType: TAB_CONTENT_ELEMENT_TYPE,
-						settings: {
-							'tab-id': stringPropTypeUtil.create( newTabId ),
-						},
 						editor_settings: { title: `Tab ${ index + 1 } content` },
 					},
 				},
 				{
 					containerId: tabsMenuId,
 					model: {
-						id: newTabId,
 						elType: TAB_ELEMENT_TYPE,
-						settings: {
-							...item,
-							'tab-content-id': stringPropTypeUtil.create( newTabContentId ),
-						},
 						editor_settings: { title: `Tab ${ index + 1 } trigger` },
 					},
 				},

package/src/controls-registry/element-controls/tabs-control/tabs-control.tsx

@@ -12,7 +12,7 @@ import {
 	useElementChildren,
 	useElementEditorSettings,
 } from '@elementor/editor-elements';
-import { type CreateOptions, stringPropTypeUtil } from '@elementor/editor-props';
+import { type CreateOptions, numberPropTypeUtil } from '@elementor/editor-props';
 import { InfoCircleFilledIcon } from '@elementor/icons';
 import { Alert, Chip, Infotip, type InfotipProps, Stack, Switch, TextField, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -44,12 +44,13 @@ export const TabsControl = ( { label }: { label: string } ) => {
 	const tabList = getElementByType( element.id, TAB_MENU_ELEMENT_TYPE );
 	const tabContentArea = getElementByType( element.id, TAB_CONTENT_AREA_ELEMENT_TYPE );
 
-	const repeaterValues: RepeaterItem< TabItem >[] = tabLinks.map( ( tabLink ) => {
+	const repeaterValues: RepeaterItem< TabItem >[] = tabLinks.map( ( tabLink, index ) => {
 		const { title: titleSetting } = getElementEditorSettings( tabLink.id ) ?? {};
 
 		return {
 			id: tabLink.id,
 			title: titleSetting,
+			index,
 		};
 	} );
 
@@ -67,13 +68,13 @@ export const TabsControl = ( { label }: { label: string } ) => {
 		if ( meta?.action?.type === 'remove' ) {
 			const items = meta.action.payload;
 
-			return removeItem( { items } );
+			return removeItem( { items, tabContentAreaId: tabContentArea.id } );
 		}
 
 		if ( meta?.action?.type === 'duplicate' ) {
 			const items = meta.action.payload;
 
-			return duplicateItem( { items } );
+			return duplicateItem( { items, tabContentAreaId: tabContentArea.id } );
 		}
 
 		if ( meta?.action?.type === 'reorder' ) {
@@ -84,6 +85,7 @@ export const TabsControl = ( { label }: { label: string } ) => {
 				tabsMenuId: tabList.id,
 				tabContentAreaId: tabContentArea.id,
 				movedElementId: tabLinks[ from ].id,
+				movedElementIndex: from,
 			} );
 		}
 	};
@@ -106,7 +108,7 @@ export const TabsControl = ( { label }: { label: string } ) => {
 	);
 };
 
-const ItemLabel = ( { value }: { value: TabItem } ) => {
+const ItemLabel = ( { value, index }: { value: TabItem; index: number } ) => {
 	const id = value.id ?? '';
 
 	const editorSettings = useElementEditorSettings( id );
@@ -117,17 +119,16 @@ const ItemLabel = ( { value }: { value: TabItem } ) => {
 		<Stack sx={ { minHeight: 20 } } direction="row" alignItems="center" gap={ 1.5 }>
 			<span>{ elementTitle }</span>
 			<SettingsField bind="default-active-tab" propDisplayName={ __( 'Tabs', 'elementor' ) }>
-				<ItemDefaultTab value={ value } />
+				<ItemDefaultTab index={ index } />
 			</SettingsField>
 		</Stack>
 	);
 };
 
-const ItemDefaultTab = ( { value }: { value: TabItem } ) => {
-	const id = value.id ?? '';
-	const { value: defaultItem } = useBoundProp( stringPropTypeUtil );
+const ItemDefaultTab = ( { index }: { index: number } ) => {
+	const { value: defaultItem } = useBoundProp( numberPropTypeUtil );
 
-	const isDefault = defaultItem === id;
+	const isDefault = defaultItem === index;
 
 	if ( ! isDefault ) {
 		return null;
@@ -136,7 +137,7 @@ const ItemDefaultTab = ( { value }: { value: TabItem } ) => {
 	return <Chip size="tiny" shape="rounded" label={ __( 'Default', 'elementor' ) } />;
 };
 
-const ItemContent = ( { value }: { value: TabItem } ) => {
+const ItemContent = ( { value, index }: { value: TabItem; index: number } ) => {
 	if ( ! value.id ) {
 		return null;
 	}
@@ -145,16 +146,16 @@ const ItemContent = ( { value }: { value: TabItem } ) => {
 		<Stack p={ 2 } gap={ 1.5 }>
 			<TabLabelControl elementId={ value.id } />
 			<SettingsField bind="default-active-tab" propDisplayName={ __( 'Tabs', 'elementor' ) }>
-				<DefaultTabControl elementId={ value.id } />
+				<DefaultTabControl tabIndex={ index } />
 			</SettingsField>
 		</Stack>
 	);
 };
 
-const DefaultTabControl = ( { elementId }: { elementId: string } ) => {
-	const { value, setValue } = useBoundProp( stringPropTypeUtil );
+const DefaultTabControl = ( { tabIndex }: { tabIndex: number } ) => {
+	const { value, setValue } = useBoundProp( numberPropTypeUtil );
 
-	const isDefault = value === elementId;
+	const isDefault = value === tabIndex;
 
 	return (
 		<Stack direction="row" alignItems="center" justifyContent="space-between" gap={ 2 }>
@@ -165,7 +166,7 @@ const DefaultTabControl = ( { elementId }: { elementId: string } ) => {
 					checked={ isDefault }
 					disabled={ isDefault }
 					onChange={ ( { target }: React.ChangeEvent< HTMLInputElement > ) => {
-						setValue( target.checked ? elementId : null );
+						setValue( target.checked ? tabIndex : null );
 					} }
 					inputProps={ {
 						...( isDefault ? { style: { opacity: 0, cursor: 'not-allowed' } } : {} ),