@elementor/editor-controls 4.1.0-731 → 4.1.0-733

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "4.1.0-731",
+  "version": "4.1.0-733",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,22 +40,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.1.0-731",
-    "@elementor/editor-elements": "4.1.0-731",
-    "@elementor/editor-props": "4.1.0-731",
-    "@elementor/editor-responsive": "4.1.0-731",
-    "@elementor/editor-ui": "4.1.0-731",
-    "@elementor/editor-v1-adapters": "4.1.0-731",
-    "@elementor/env": "4.1.0-731",
-    "@elementor/http-client": "4.1.0-731",
+    "@elementor/editor-current-user": "4.1.0-733",
+    "@elementor/editor-elements": "4.1.0-733",
+    "@elementor/editor-props": "4.1.0-733",
+    "@elementor/editor-responsive": "4.1.0-733",
+    "@elementor/editor-ui": "4.1.0-733",
+    "@elementor/editor-v1-adapters": "4.1.0-733",
+    "@elementor/env": "4.1.0-733",
+    "@elementor/http-client": "4.1.0-733",
     "@elementor/icons": "^1.68.0",
-    "@elementor/locations": "4.1.0-731",
-    "@elementor/events": "4.1.0-731",
-    "@elementor/query": "4.1.0-731",
-    "@elementor/session": "4.1.0-731",
+    "@elementor/locations": "4.1.0-733",
+    "@elementor/events": "4.1.0-733",
+    "@elementor/query": "4.1.0-733",
+    "@elementor/session": "4.1.0-733",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.1.0-731",
-    "@elementor/wp-media": "4.1.0-731",
+    "@elementor/utils": "4.1.0-733",
+    "@elementor/wp-media": "4.1.0-733",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",

package/src/components/repeater/repeater.tsx

@@ -79,6 +79,8 @@ type BaseItemSettings< T > = {
 	Icon: React.ComponentType< { value: T } >;
 	Content: RepeaterItemContent< T >;
 	actions?: ( value: T ) => React.ReactNode;
+	onPopoverOpen?: ( value: T ) => void;
+	onPopoverClose?: () => void;
 };
 
 type SortableItemSettings< T > = BaseItemSettings< T > & {
@@ -273,6 +275,8 @@ export const Repeater = < T, >( {
 									toggleDisableItem={ () => toggleDisableRepeaterItem( index ) }
 									openOnMount={ openOnAdd && openItem === index }
 									onOpen={ () => setOpenItem( EMPTY_OPEN_ITEM ) }
+									onPopoverOpen={ itemSettings.onPopoverOpen }
+									onPopoverClose={ itemSettings.onPopoverClose }
 									showDuplicate={ showDuplicate }
 									showToggle={ showToggle }
 									showRemove={ showRemove }
@@ -307,6 +311,8 @@ type RepeaterItemProps< T > = {
 	children: ( props: Pick< RepeaterItemContentProps< T >, 'anchorEl' > ) => React.ReactNode;
 	openOnMount: boolean;
 	onOpen: () => void;
+	onPopoverOpen?: ( value: T ) => void;
+	onPopoverClose?: () => void;
 	showDuplicate: boolean;
 	showToggle: boolean;
 	showRemove: boolean;
@@ -325,6 +331,8 @@ const RepeaterItem = < T, >( {
 	toggleDisableItem,
 	openOnMount,
 	onOpen,
+	onPopoverOpen,
+	onPopoverClose,
 	showDuplicate,
 	showToggle,
 	showRemove,
@@ -332,7 +340,11 @@ const RepeaterItem = < T, >( {
 	actions,
 	value,
 }: RepeaterItemProps< T > ) => {
-	const { popoverState, popoverProps, ref, setRef } = usePopover( openOnMount, onOpen );
+	const { popoverState, popoverProps, ref, setRef } = usePopover( openOnMount, () => {
+		onOpen();
+		onPopoverOpen?.( value );
+	} );
+	const triggerProps = bindTrigger( popoverState );
 
 	const duplicateLabel = __( 'Duplicate', 'elementor' );
 	const toggleLabel = propDisabled ? __( 'Show', 'elementor' ) : __( 'Hide', 'elementor' );
@@ -345,7 +357,13 @@ const RepeaterItem = < T, >( {
 				label={ label }
 				ref={ setRef }
 				aria-label={ __( 'Open item', 'elementor' ) }
-				{ ...bindTrigger( popoverState ) }
+				{ ...triggerProps }
+				onClick={ ( e: React.MouseEvent< HTMLElement > ) => {
+					triggerProps.onClick( e );
+					if ( ! popoverState.isOpen ) {
+						onPopoverOpen?.( value );
+					}
+				} }
 				startIcon={ startIcon }
 				actions={
 					<>
@@ -374,7 +392,15 @@ const RepeaterItem = < T, >( {
 					</>
 				}
 			/>
-			<RepeaterPopover width={ ref?.getBoundingClientRect().width } { ...popoverProps } anchorEl={ ref }>
+			<RepeaterPopover
+				width={ ref?.getBoundingClientRect().width }
+				{ ...popoverProps }
+				onClose={ () => {
+					popoverProps.onClose?.();
+					onPopoverClose?.();
+				} }
+				anchorEl={ ref }
+			>
 				<Box>{ children( { anchorEl: ref } ) }</Box>
 			</RepeaterPopover>
 		</>