@elementor/editor-ui 4.0.0-552 → 4.0.0-573

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-ui",
   "description": "Elementor Editor UI",
-  "version": "4.0.0-552",
+  "version": "4.0.0-573",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,7 +37,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor-v1-adapters": "4.0.0-552",
+    "@elementor/editor-v1-adapters": "4.0.0-573",
     "@elementor/icons": "^1.63.0",
     "@elementor/ui": "1.36.17",
     "@tanstack/react-virtual": "^3.13.3",

package/src/components/collapsible-content.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { type ReactNode, useState } from 'react';
+import { Button, Collapse, Stack, styled } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { CollapseIcon } from './collapse-icon';
+
+type StaticItem< T = unknown > = T extends ( ...args: unknown[] ) => unknown ? never : T;
+
+type CallbackItem< T > = ( isOpen: boolean ) => T;
+export type CollapsibleValue< T > = CallbackItem< T > | StaticItem< T >;
+
+type CollapsibleContentProps = React.PropsWithChildren< {
+	defaultOpen?: boolean;
+	titleEnd?: CollapsibleValue< ReactNode | string > | null;
+} >;
+
+const IndicatorsWrapper = styled( 'div' )`
+	position: absolute;
+	top: 0;
+	right: ${ ( { theme } ) => theme.spacing( 3 ) };
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+`;
+
+export const CollapsibleContent = ( { children, defaultOpen = false, titleEnd = null }: CollapsibleContentProps ) => {
+	const [ open, setOpen ] = useState( defaultOpen );
+
+	const handleToggle = () => {
+		setOpen( ( prevOpen ) => ! prevOpen );
+	};
+
+	return (
+		<Stack>
+			<Stack sx={ { position: 'relative' } }>
+				<Button
+					fullWidth
+					size="small"
+					color="secondary"
+					variant="outlined"
+					onClick={ handleToggle }
+					endIcon={ <CollapseIcon open={ open } /> }
+					sx={ { my: 0.5 } }
+					aria-label={ open ? 'Show less' : 'Show more' }
+				>
+					{ open ? __( 'Show less', 'elementor' ) : __( 'Show more', 'elementor' ) }
+				</Button>
+				{ titleEnd && <IndicatorsWrapper>{ getCollapsibleValue( titleEnd, open ) }</IndicatorsWrapper> }
+			</Stack>
+			<Collapse in={ open } timeout="auto" unmountOnExit>
+				{ children }
+			</Collapse>
+		</Stack>
+	);
+};
+
+export function getCollapsibleValue< T >( value: CollapsibleValue< T >, isOpen: boolean ): T {
+	if ( typeof value === 'function' ) {
+		return ( value as CallbackItem< T > )( isOpen );
+	}
+
+	return value;
+}

package/src/components/confirmation-dialog.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
+import { useState } from 'react';
 import { AlertOctagonFilledIcon } from '@elementor/icons';
 import {
 	Button,
+	Checkbox,
 	Dialog,
 	DialogActions,
 	DialogContent,
@@ -9,6 +11,8 @@ import {
 	type DialogContentTextProps,
 	type DialogProps,
 	DialogTitle,
+	FormControlLabel,
+	Typography,
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -22,9 +26,18 @@ export const ConfirmationDialog = ( { open, onClose, children }: ConfirmationDia
 	</Dialog>
 );
 
-const ConfirmationDialogTitle = ( { children }: React.PropsWithChildren ) => (
+type ConfirmationDialogTitleProps = React.PropsWithChildren< {
+	icon?: React.ElementType;
+	iconColor?: 'error' | 'secondary';
+} >;
+
+const ConfirmationDialogTitle = ( {
+	children,
+	icon: Icon = AlertOctagonFilledIcon,
+	iconColor = 'error',
+}: ConfirmationDialogTitleProps ) => (
 	<DialogTitle id={ TITLE_ID } display="flex" alignItems="center" gap={ 1 } sx={ { lineHeight: 1 } }>
-		<AlertOctagonFilledIcon color="error" />
+		<Icon color={ iconColor } />
 		{ children }
 	</DialogTitle>
 );
@@ -42,6 +55,9 @@ type ConfirmationDialogActionsProps = {
 	onConfirm: () => void;
 	cancelLabel?: string;
 	confirmLabel?: string;
+	color?: 'error' | 'secondary';
+	onSuppressMessage?: () => void;
+	suppressLabel?: string;
 };
 
 const ConfirmationDialogActions = ( {
@@ -49,17 +65,47 @@ const ConfirmationDialogActions = ( {
 	onConfirm,
 	cancelLabel,
 	confirmLabel,
-}: ConfirmationDialogActionsProps ) => (
-	<DialogActions>
-		<Button color="secondary" onClick={ onClose }>
-			{ cancelLabel ?? __( 'Not now', 'elementor' ) }
-		</Button>
-		{ /* eslint-disable-next-line jsx-a11y/no-autofocus */ }
-		<Button autoFocus variant="contained" color="error" onClick={ onConfirm }>
-			{ confirmLabel ?? __( 'Delete', 'elementor' ) }
-		</Button>
-	</DialogActions>
-);
+	color = 'error',
+	onSuppressMessage,
+	suppressLabel = __( "Don't show this again", 'elementor' ),
+}: ConfirmationDialogActionsProps ) => {
+	const [ dontShowAgain, setDontShowAgain ] = useState( false );
+
+	const handleConfirm = () => {
+		if ( dontShowAgain && onSuppressMessage ) {
+			onSuppressMessage();
+		}
+		onConfirm();
+	};
+
+	return (
+		<DialogActions sx={ onSuppressMessage ? { justifyContent: 'space-between', alignItems: 'center' } : undefined }>
+			{ onSuppressMessage && (
+				<FormControlLabel
+					control={
+						<Checkbox
+							checked={ dontShowAgain }
+							onChange={ ( event: React.ChangeEvent< HTMLInputElement > ) =>
+								setDontShowAgain( event.target.checked )
+							}
+							size="small"
+						/>
+					}
+					label={ <Typography variant="body2">{ suppressLabel }</Typography> }
+				/>
+			) }
+			<div>
+				<Button color="secondary" onClick={ onClose }>
+					{ cancelLabel ?? __( 'Not now', 'elementor' ) }
+				</Button>
+				{ /* eslint-disable-next-line jsx-a11y/no-autofocus */ }
+				<Button autoFocus variant="contained" color={ color } onClick={ handleConfirm } sx={ { ml: 1 } }>
+					{ confirmLabel ?? __( 'Delete', 'elementor' ) }
+				</Button>
+			</div>
+		</DialogActions>
+	);
+};
 
 ConfirmationDialog.Title = ConfirmationDialogTitle;
 ConfirmationDialog.Content = ConfirmationDialogContent;

package/src/components/form.tsx

@@ -3,8 +3,9 @@ import { type FormEvent as FormEvent, type KeyboardEvent, type PropsWithChildren
 
 type Props = PropsWithChildren< {
 	onSubmit?: () => void;
+	'data-testid'?: string;
 } >;
-export const Form = ( { children, onSubmit }: Props ) => {
+export const Form = ( { children, onSubmit, 'data-testid': dataTestId }: Props ) => {
 	const formRef = useRef< HTMLFormElement >( null );
 
 	const handleSubmit = ( e: FormEvent< HTMLFormElement > | SubmitEvent ) => {
@@ -23,7 +24,12 @@ export const Form = ( { children, onSubmit }: Props ) => {
 
 	return (
 		// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-		<form onSubmit={ handleSubmit } ref={ formRef } onKeyDown={ handleKeyDown }>
+		<form
+			onSubmit={ handleSubmit }
+			ref={ formRef }
+			onKeyDown={ handleKeyDown }
+			{ ...( dataTestId ? { 'data-testid': dataTestId } : {} ) }
+		>
 			{ children }
 		</form>
 	);

package/src/components/{promotion-infotip.tsx → promotions/promotion-infotip.tsx}

@@ -1,6 +1,4 @@
 import * as React from 'react';
-import { useEffect } from 'react';
-import { getCanvasIframeDocument } from '@elementor/editor-v1-adapters';
 import {
 	Card,
 	CardActions,
@@ -13,7 +11,8 @@ import {
 	Typography,
 } from '@elementor/ui';
 
-import { CtaButton } from './cta-button';
+import { useCanvasClickHandler } from '../../hooks';
+import { CtaButton } from '../cta-button';
 
 type InfotipCardProps = {
 	title: string;
@@ -30,17 +29,7 @@ type PromotionInfotipProps = React.PropsWithChildren<
 >;
 
 export const PromotionInfotip = ( { children, open, onClose, ...cardProps }: PromotionInfotipProps ) => {
-	useEffect( () => {
-		const canvasDocument = open ? getCanvasIframeDocument() : null;
-
-		if ( ! canvasDocument ) {
-			return;
-		}
-
-		canvasDocument.addEventListener( 'mousedown', onClose );
-
-		return () => canvasDocument.removeEventListener( 'mousedown', onClose );
-	}, [ open, onClose ] );
+	useCanvasClickHandler( !! open, onClose );
 
 	return (
 		<Infotip placement="right" content={ <InfotipCard onClose={ onClose } { ...cardProps } /> } open={ open }>

package/src/components/{promotion-popover.tsx → promotions/promotion-popover.tsx}

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MouseEvent, type RefObject } from 'react';
 import { CrownFilledIcon } from '@elementor/icons';
 import {
 	Alert,
@@ -16,7 +17,7 @@ type PromotionPopoverCardProps = {
 	content: string;
 	ctaUrl: string;
 	ctaText?: string;
-	onClose: () => void;
+	onClose: ( e: MouseEvent ) => void;
 };
 
 type PromotionPopoverProps = React.PropsWithChildren<
@@ -24,6 +25,7 @@ type PromotionPopoverProps = React.PropsWithChildren<
 		open: boolean;
 		placement?: InfotipProps[ 'placement' ];
 		slotProps?: InfotipProps[ 'slotProps' ];
+		anchorRef?: RefObject< HTMLElement | null >;
 	}
 >;
 
@@ -32,15 +34,19 @@ export const PromotionPopover = ( {
 	open,
 	placement = 'right',
 	slotProps,
+	anchorRef,
 	...cardProps
 }: PromotionPopoverProps ) => {
+	const anchorEl = anchorRef?.current;
+
 	const defaultSlotProps: InfotipProps[ 'slotProps' ] = {
 		popper: {
+			...( anchorEl && { anchorEl } ),
 			modifiers: [
 				{
 					name: 'offset',
 					options: {
-						offset: [ 0, 10 ],
+						offset: anchorRef ? [ 0, 4 ] : [ 0, 10 ],
 					},
 				},
 			],

package/src/hooks/index.ts

@@ -1,3 +1,4 @@
 export { useScrollToSelected } from './use-scroll-to-selected';
 export { useScrollTop } from './use-scroll-top';
 export { useTextFieldAutoSelect } from './use-text-field-auto-select';
+export { useCanvasClickHandler } from './use-canvas-click-handler';

package/src/hooks/use-canvas-click-handler.tsx

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { getCanvasIframeDocument } from '@elementor/editor-v1-adapters';
+
+export const useCanvasClickHandler = ( isActive: boolean, onClickAway: ( e: MouseEvent ) => void ) => {
+	useEffect( () => {
+		const canvasDocument = isActive ? getCanvasIframeDocument() : null;
+
+		if ( ! canvasDocument ) {
+			return;
+		}
+
+		canvasDocument.addEventListener( 'mousedown', onClickAway );
+
+		return () => canvasDocument.removeEventListener( 'mousedown', onClickAway );
+	}, [ isActive, onClickAway ] );
+};

package/src/index.ts

@@ -1,5 +1,6 @@
 // components
 export { CollapseIcon } from './components/collapse-icon';
+export { CollapsibleContent, getCollapsibleValue, type CollapsibleValue } from './components/collapsible-content';
 export { EllipsisWithTooltip } from './components/ellipsis-with-tooltip';
 export { EditableField } from './components/editable-field';
 export { IntroductionModal } from './components/introduction-modal';
@@ -12,10 +13,10 @@ export { GlobalDialog, openDialog, closeDialog } from './components/global-dialo
 export { SearchField } from './components/search-field';
 export { Form } from './components/form';
 export { CtaButton } from './components/cta-button';
-export { PromotionInfotip } from './components/promotion-infotip';
-export { PromotionPopover } from './components/promotion-popover';
-export { PromotionChip } from './components/promotion-chip';
-export { PromotionAlert } from './components/promotion-alert';
+export { PromotionInfotip } from './components/promotions/promotion-infotip';
+export { PromotionPopover } from './components/promotions/promotion-popover';
+export { PromotionChip } from './components/promotions/promotion-chip';
+export { PromotionAlert } from './components/promotions/promotion-alert';
 export { FloatingActionsBar, useFloatingActionsBar } from './components/floating-bar';
 
 export * from './components/popover';
@@ -28,3 +29,4 @@ export { SectionRefContext, useSectionWidth } from './contexts/section-context';
 // hooks
 export { useEditable } from './hooks/use-editable';
 export { useTextFieldAutoSelect } from './hooks/use-text-field-auto-select';
+export { useCanvasClickHandler } from './hooks/use-canvas-click-handler';