@elementor/editor-editing-panel 4.4.0-1121 → 4.4.0-1122

package/package.json

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

package/src/controls-registry/element-controls/accordion-items-control/accordion-items-control.tsx

@@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n';
 
 import { useElement } from '../../../contexts/element-context';
 import { ACCORDION_ELEMENT_TYPE, ACCORDION_ITEM_ELEMENT_TYPE, type AccordionItem, useActions } from './use-actions';
-import { useShowIconWriteThrough } from './use-show-icon-write-through';
+import { useDifferentOpenIconWriteThrough, useShowIconWriteThrough } from './use-show-icon-write-through';
 
 export const AccordionItemsControl = ( { label }: { label: string } ) => {
 	const { element, settings } = useElement();
@@ -26,8 +26,10 @@ export const AccordionItemsControl = ( { label }: { label: string } ) => {
 	// drive the write-through to every head - see `useShowIconWriteThrough` for why this can't live
 	// inside the generic switch control itself.
 	const showIcon = booleanPropTypeUtil.extract( settings.show_icon ) ?? true;
+	const differentOpenIcon = booleanPropTypeUtil.extract( settings.different_open_icon ) ?? false;
 
 	useShowIconWriteThrough( element.id, showIcon );
+	useDifferentOpenIconWriteThrough( element.id, differentOpenIcon );
 
 	const repeaterValues: RepeaterItem< AccordionItem >[] = items.map( ( item, index ) => {
 		return {
@@ -50,6 +52,7 @@ export const AccordionItemsControl = ( { label }: { label: string } ) => {
 				existingTitles: repeaterValues.map( ( { title } ) => title ),
 				items: meta.action.payload,
 				showIcon,
+				differentOpenIcon,
 			} );
 		}
 

package/src/controls-registry/element-controls/accordion-items-control/use-actions.ts

@@ -78,7 +78,7 @@ const getNextItemNumber = ( existingTitles: ( string | undefined )[] ) => {
 // `V1ElementData` is the plain-object form of a model tree: nested `elements` are objects that
 // Backbone turns into models on `initialize`, and ids have to be generated here because only the
 // outermost model gets one from `document/elements/create`.
-const buildItemModel = ( position: number, showIcon: boolean ): V1ElementData => {
+const buildItemModel = ( position: number, showIcon: boolean, differentOpenIcon: boolean ): V1ElementData => {
 	const numberedTitle = getItemTitle( position );
 
 	return {
@@ -94,7 +94,10 @@ const buildItemModel = ( position: number, showIcon: boolean ): V1ElementData =>
 				// has already turned Show Icon off, a newly added item must start with its icon hidden
 				// too, not re-show one just because the item itself is brand new. See the comment on
 				// the mirrored prop in `Atomic_Accordion_Item_Header` for why this duplication exists.
-				settings: { show_icon: booleanPropTypeUtil.create( showIcon ) },
+				settings: {
+					show_icon: booleanPropTypeUtil.create( showIcon ),
+					different_open_icon: booleanPropTypeUtil.create( differentOpenIcon ),
+				},
 				elements: [
 					{
 						elType: ACCORDION_ITEM_TITLE_ELEMENT_TYPE,
@@ -142,6 +145,7 @@ export const useActions = () => {
 		existingTitles,
 		items,
 		showIcon,
+		differentOpenIcon = false,
 	}: {
 		accordionId: string;
 		existingTitles: ( string | undefined )[];
@@ -149,6 +153,7 @@ export const useActions = () => {
 		// The root's *current* `show_icon` value, so the new item's header starts in sync with it
 		// instead of the schema default - see the comment on `buildItemModel`.
 		showIcon: boolean;
+		differentOpenIcon?: boolean;
 	} ) => {
 		const accordion = getContainer( accordionId );
 
@@ -175,7 +180,11 @@ export const useActions = () => {
 						// *existing* element out of the document, not for describing one to create. A single
 						// cast is enough (the two types overlap enough for TS to allow it directly); no
 						// `unknown` escape hatch needed.
-						model: buildItemModel( position, showIcon ) as CreateElementParams[ 'model' ],
+						model: buildItemModel(
+							position,
+							showIcon,
+							differentOpenIcon
+						) as CreateElementParams[ 'model' ],
 					},
 				],
 			} );

package/src/controls-registry/element-controls/accordion-items-control/use-show-icon-write-through.ts

@@ -110,6 +110,78 @@ function getAccordionHeaderIds( accordionId: string ): string[] {
 	return headerContainers.map( ( header ) => header.id );
 }
 
+type CascadeDifferentOpenIconPayload = {
+	accordionId: string;
+	differentOpenIcon: boolean;
+};
+
+type CascadeDifferentOpenIconResult = {
+	previous: Record< string, ReturnType< typeof booleanPropTypeUtil.create > | null | undefined >;
+};
+
+export const cascadeDifferentOpenIconToHeaders = undoable<
+	CascadeDifferentOpenIconPayload,
+	CascadeDifferentOpenIconResult,
+	undefined
+>(
+	{
+		do: ( { accordionId, differentOpenIcon } ) => {
+			const headerIds = getAccordionHeaderIds( accordionId );
+
+			const previous = Object.fromEntries(
+				headerIds.map(
+					( headerId ) =>
+						[
+							headerId,
+							getElementSettings< ReturnType< typeof booleanPropTypeUtil.create > >( headerId, [
+								'different_open_icon',
+							] ).different_open_icon,
+						] as const
+				)
+			);
+
+			headerIds.forEach( ( headerId ) => {
+				updateElementSettings( {
+					id: headerId,
+					props: { different_open_icon: booleanPropTypeUtil.create( differentOpenIcon ) },
+					withHistory: false,
+				} );
+			} );
+
+			return { previous };
+		},
+		undo: ( _payload, { previous } ) => {
+			Object.entries( previous ).forEach( ( [ headerId, previousValue ] ) => {
+				updateElementSettings( {
+					id: headerId,
+					props: { different_open_icon: previousValue ?? null },
+					withHistory: false,
+				} );
+			} );
+		},
+	},
+	{
+		title: __( 'Accordion', 'elementor' ),
+		subtitle: __( 'Different icon when open', 'elementor' ),
+		debounce: { wait: HISTORY_DEBOUNCE_WAIT },
+	}
+);
+
+export function useDifferentOpenIconWriteThrough( accordionId: string, differentOpenIcon: boolean ): void {
+	const previousRef = useRef< { accordionId: string; differentOpenIcon: boolean } | null >( null );
+
+	useEffect( () => {
+		const previous = previousRef.current;
+		previousRef.current = { accordionId, differentOpenIcon };
+
+		if ( ! previous || previous.accordionId !== accordionId || previous.differentOpenIcon === differentOpenIcon ) {
+			return;
+		}
+
+		cascadeDifferentOpenIconToHeaders( { accordionId, differentOpenIcon } );
+	}, [ accordionId, differentOpenIcon ] );
+}
+
 // Watches the root's *current* `show_icon` value (read reactively from the panel's element
 // settings) and cascades it to every header on change. Skips the very first render for a given
 // element so mounting the panel on an already-toggled-off accordion doesn't re-fire a no-op