@elementor/editor-controls 4.1.0-800 → 4.1.0-802

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-800",
+  "version": "4.1.0-802",
   "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-800",
-    "@elementor/editor-elements": "4.1.0-800",
-    "@elementor/editor-props": "4.1.0-800",
-    "@elementor/editor-responsive": "4.1.0-800",
-    "@elementor/editor-ui": "4.1.0-800",
-    "@elementor/editor-v1-adapters": "4.1.0-800",
-    "@elementor/env": "4.1.0-800",
-    "@elementor/events": "4.1.0-800",
-    "@elementor/http-client": "4.1.0-800",
+    "@elementor/editor-current-user": "4.1.0-802",
+    "@elementor/editor-elements": "4.1.0-802",
+    "@elementor/editor-props": "4.1.0-802",
+    "@elementor/editor-responsive": "4.1.0-802",
+    "@elementor/editor-ui": "4.1.0-802",
+    "@elementor/editor-v1-adapters": "4.1.0-802",
+    "@elementor/env": "4.1.0-802",
+    "@elementor/events": "4.1.0-802",
+    "@elementor/http-client": "4.1.0-802",
     "@elementor/icons": "^1.68.0",
-    "@elementor/locations": "4.1.0-800",
-    "@elementor/query": "4.1.0-800",
-    "@elementor/session": "4.1.0-800",
+    "@elementor/locations": "4.1.0-802",
+    "@elementor/query": "4.1.0-802",
+    "@elementor/session": "4.1.0-802",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.1.0-800",
-    "@elementor/wp-media": "4.1.0-800",
+    "@elementor/utils": "4.1.0-802",
+    "@elementor/wp-media": "4.1.0-802",
     "@monaco-editor/react": "^4.7.0",
     "@tiptap/extension-bold": "^3.11.1",
     "@tiptap/extension-document": "^3.11.1",

package/src/components/control-repeater/context/repeater-context.tsx

@@ -4,6 +4,7 @@ import { type PropTypeUtil } from '@elementor/editor-props';
 import { type PopupState, usePopupState } from '@elementor/ui';
 
 import { useBoundProp } from '../../../bound-prop-context/use-bound-prop';
+import { usePopoverDismiss } from '../../../hooks/use-repeater-popover-dismiss';
 import { useSyncExternalState } from '../../../hooks/use-sync-external-state';
 import { eventBus } from '../../../services/event-bus';
 import { type Item, type RepeatablePropValue } from '../types';
@@ -144,6 +145,18 @@ export const RepeaterContextProvider = < T extends RepeatablePropValue = Repeata
 		setItems( newItems );
 	};
 
+	const closePopover = () => {
+		if ( ! isOpen ) {
+			return;
+		}
+
+		setOpenItemIndex( EMPTY_OPEN_ITEM );
+		setRowRef( null );
+		popoverState.close();
+	};
+
+	usePopoverDismiss( { isOpen, onClose: closePopover } );
+
 	return (
 		<RepeaterContext.Provider
 			value={ {

package/src/components/repeater/repeater.tsx

@@ -6,7 +6,6 @@ import {
 	bindPopover,
 	bindTrigger,
 	Box,
-	ClickAwayListener,
 	IconButton,
 	Infotip,
 	Tooltip,
@@ -17,6 +16,7 @@ import { __ } from '@wordpress/i18n';
 
 import { type SetValueMeta } from '../../bound-prop-context';
 import { ControlAdornments } from '../../control-adornments/control-adornments';
+import { usePopoverDismiss } from '../../hooks/use-repeater-popover-dismiss';
 import { RepeaterItemIconSlot, RepeaterItemLabelSlot } from '../control-repeater/locations';
 import { SectionContent } from '../section-content';
 import { RepeaterHeader } from './repeater-header';
@@ -352,12 +352,14 @@ const RepeaterItem = < T, >( {
 	);
 	const triggerProps = bindTrigger( popoverState );
 
+	usePopoverDismiss( { isOpen: popoverState.isOpen, onClose: popoverProps.onClose } );
+
 	const duplicateLabel = __( 'Duplicate', 'elementor' );
 	const toggleLabel = propDisabled ? __( 'Show', 'elementor' ) : __( 'Hide', 'elementor' );
 	const removeLabel = __( 'Remove', 'elementor' );
 
 	return (
-		<>
+		<Box sx={ { display: 'contents' } }>
 			<RepeaterTag
 				disabled={ disabled }
 				label={ label }
@@ -399,15 +401,9 @@ const RepeaterItem = < T, >( {
 				}
 			/>
 			<RepeaterPopover width={ ref?.getBoundingClientRect().width } { ...popoverProps } anchorEl={ ref }>
-				<ClickAwayListener
-					mouseEvent="onMouseDown"
-					touchEvent="onTouchStart"
-					onClickAway={ popoverProps.onClose }
-				>
-					<Box>{ children( { anchorEl: ref } ) }</Box>
-				</ClickAwayListener>
+				<Box>{ children( { anchorEl: ref } ) }</Box>
 			</RepeaterPopover>
-		</>
+		</Box>
 	);
 };
 

package/src/hooks/use-repeater-popover-dismiss.ts

@@ -0,0 +1,53 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { type Breakpoint, useActiveBreakpoint, useBreakpoints } from '@elementor/editor-responsive';
+
+const serializeBreakpoints = ( breakpoints: Breakpoint[] ) =>
+	breakpoints.map( ( b ) => [ b.id, b.width ?? '', b.type ?? '' ].join( ':' ) ).join( '|' );
+
+export const usePopoverDismiss = ( { isOpen, onClose }: { isOpen: boolean; onClose: () => void } ) => {
+	const onCloseRef = useRef( onClose );
+	onCloseRef.current = onClose;
+
+	const activeBreakpoint = useActiveBreakpoint();
+	const breakpoints = useBreakpoints();
+	const breakpointsSignature = useMemo( () => serializeBreakpoints( breakpoints ), [ breakpoints ] );
+
+	const prevActiveBreakpointRef = useRef< typeof activeBreakpoint >( undefined );
+	const prevBreakpointsSignatureRef = useRef< string | null >( null );
+
+	useEffect( () => {
+		if ( ! isOpen ) {
+			prevActiveBreakpointRef.current = activeBreakpoint;
+			prevBreakpointsSignatureRef.current = breakpointsSignature;
+			return;
+		}
+
+		const previousBreakpoint = prevActiveBreakpointRef.current;
+		const previousSignature = prevBreakpointsSignatureRef.current;
+
+		const breakpointChanged = previousBreakpoint !== undefined && previousBreakpoint !== activeBreakpoint;
+		const breakpointsChanged = previousSignature !== null && previousSignature !== breakpointsSignature;
+
+		if ( breakpointChanged || breakpointsChanged ) {
+			onCloseRef.current();
+		}
+
+		prevActiveBreakpointRef.current = activeBreakpoint;
+		prevBreakpointsSignatureRef.current = breakpointsSignature;
+	}, [ activeBreakpoint, breakpointsSignature, isOpen ] );
+
+	useEffect( () => {
+		if ( ! isOpen ) {
+			return;
+		}
+		const onKeyDown = ( event: KeyboardEvent ) => {
+			if ( event.key === 'Escape' && ! event.defaultPrevented ) {
+				onCloseRef.current();
+			}
+		};
+		document.addEventListener( 'keydown', onKeyDown );
+		return () => {
+			document.removeEventListener( 'keydown', onKeyDown );
+		};
+	}, [ isOpen ] );
+};