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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-ui",
   "description": "Elementor Editor UI",
-  "version": "4.0.0-564",
+  "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-564",
+    "@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/promotions/promotion-popover.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MouseEvent } from 'react';
+import { type MouseEvent, type RefObject } from 'react';
 import { CrownFilledIcon } from '@elementor/icons';
 import {
 	Alert,
@@ -25,6 +25,7 @@ type PromotionPopoverProps = React.PropsWithChildren<
 		open: boolean;
 		placement?: InfotipProps[ 'placement' ];
 		slotProps?: InfotipProps[ 'slotProps' ];
+		anchorRef?: RefObject< HTMLElement | null >;
 	}
 >;
 
@@ -33,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/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';