@elementor/editor-controls 4.1.0-759 → 4.1.0-760

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-759",
+  "version": "4.1.0-760",
   "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-759",
-    "@elementor/editor-elements": "4.1.0-759",
-    "@elementor/editor-props": "4.1.0-759",
-    "@elementor/editor-responsive": "4.1.0-759",
-    "@elementor/editor-ui": "4.1.0-759",
-    "@elementor/editor-v1-adapters": "4.1.0-759",
-    "@elementor/env": "4.1.0-759",
-    "@elementor/http-client": "4.1.0-759",
+    "@elementor/editor-current-user": "4.1.0-760",
+    "@elementor/editor-elements": "4.1.0-760",
+    "@elementor/editor-props": "4.1.0-760",
+    "@elementor/editor-responsive": "4.1.0-760",
+    "@elementor/editor-ui": "4.1.0-760",
+    "@elementor/editor-v1-adapters": "4.1.0-760",
+    "@elementor/env": "4.1.0-760",
+    "@elementor/http-client": "4.1.0-760",
     "@elementor/icons": "^1.68.0",
-    "@elementor/locations": "4.1.0-759",
-    "@elementor/events": "4.1.0-759",
-    "@elementor/query": "4.1.0-759",
-    "@elementor/session": "4.1.0-759",
+    "@elementor/locations": "4.1.0-760",
+    "@elementor/events": "4.1.0-760",
+    "@elementor/query": "4.1.0-760",
+    "@elementor/session": "4.1.0-760",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.1.0-759",
-    "@elementor/wp-media": "4.1.0-759",
+    "@elementor/utils": "4.1.0-760",
+    "@elementor/wp-media": "4.1.0-760",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",

package/src/components/repeater/repeater.tsx

@@ -6,6 +6,7 @@ import {
 	bindPopover,
 	bindTrigger,
 	Box,
+	ClickAwayListener,
 	IconButton,
 	Infotip,
 	Tooltip,
@@ -340,10 +341,14 @@ const RepeaterItem = < T, >( {
 	actions,
 	value,
 }: RepeaterItemProps< T > ) => {
-	const { popoverState, popoverProps, ref, setRef } = usePopover( openOnMount, () => {
-		onOpen();
-		onPopoverOpen?.( value );
-	} );
+	const { popoverState, popoverProps, ref, setRef } = usePopover(
+		openOnMount,
+		() => {
+			onOpen();
+			onPopoverOpen?.( value );
+		},
+		onPopoverClose
+	);
 	const triggerProps = bindTrigger( popoverState );
 
 	const duplicateLabel = __( 'Duplicate', 'elementor' );
@@ -392,22 +397,20 @@ const RepeaterItem = < T, >( {
 					</>
 				}
 			/>
-			<RepeaterPopover
-				width={ ref?.getBoundingClientRect().width }
-				{ ...popoverProps }
-				onClose={ () => {
-					popoverProps.onClose?.();
-					onPopoverClose?.();
-				} }
-				anchorEl={ ref }
-			>
-				<Box>{ children( { anchorEl: ref } ) }</Box>
+			<RepeaterPopover width={ ref?.getBoundingClientRect().width } { ...popoverProps } anchorEl={ ref }>
+				<ClickAwayListener
+					mouseEvent="onMouseDown"
+					touchEvent="onTouchStart"
+					onClickAway={ popoverProps.onClose }
+				>
+					<Box>{ children( { anchorEl: ref } ) }</Box>
+				</ClickAwayListener>
 			</RepeaterPopover>
 		</>
 	);
 };
 
-const usePopover = ( openOnMount: boolean, onOpen: () => void ) => {
+const usePopover = ( openOnMount: boolean, onOpen: () => void, onPopoverClose?: () => void ) => {
 	const [ ref, setRef ] = useState< HTMLElement | null >( null );
 
 	const popoverState = usePopupState( { variant: 'popover' } );
@@ -422,10 +425,15 @@ const usePopover = ( openOnMount: boolean, onOpen: () => void ) => {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ ref ] );
 
+	const onClose = () => {
+		popoverProps.onClose?.();
+		onPopoverClose?.();
+	};
+
 	return {
 		popoverState,
 		ref,
 		setRef,
-		popoverProps,
+		popoverProps: { ...popoverProps, onClose },
 	};
 };