@elementor/editor-ui 3.33.0-99 → 3.34.2

package/src/components/popover/menu-list.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useMemo, useRef } from 'react';
-import { Box, MenuList, MenuSubheader, styled } from '@elementor/ui';
+import { Box, ListItem, MenuList, MenuSubheader, styled } from '@elementor/ui';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
 import { useScrollTop, useScrollToSelected } from '../../hooks';
@@ -8,6 +8,7 @@ import { useScrollTop, useScrollToSelected } from '../../hooks';
 export type VirtualizedItem< T, V extends string > = {
 	type: T;
 	value: V;
+	disabled?: boolean;
 	label?: string;
 	icon?: React.ReactNode;
 	secondaryText?: string;
@@ -105,6 +106,7 @@ export const PopoverMenuList = < T, V extends string >( {
 	} );
 
 	useScrollToSelected( { selectedValue, items, virtualizer } );
+	const virtualItems = virtualizer.getVirtualItems();
 
 	return (
 		<Box ref={ containerRef } sx={ { height: '100%', overflowY: 'auto' } }>
@@ -116,7 +118,7 @@ export const PopoverMenuList = < T, V extends string >( {
 					style={ { height: `${ virtualizer.getTotalSize() }px` } }
 					data-testid={ dataTestId }
 				>
-					{ virtualizer.getVirtualItems().map( ( virtualRow ) => {
+					{ virtualItems.map( ( virtualRow ) => {
 						const item = items[ virtualRow.index ];
 						const isLast = virtualRow.index === items.length - 1;
 						const isFirst =
@@ -141,21 +143,26 @@ export const PopoverMenuList = < T, V extends string >( {
 								</MenuSubheader>
 							);
 						}
-
+						const isDisabled = item.disabled;
 						return (
-							<li
+							<ListItem
 								key={ virtualRow.key }
 								role="option"
 								aria-selected={ isSelected }
-								onClick={ ( e ) => {
-									if ( ( e.target as HTMLElement ).closest( 'button' ) ) {
-										return;
-									}
-									onSelect( item.value );
-									onClose();
-								} }
-								onKeyDown={ ( event ) => {
-									if ( event.key === 'Enter' ) {
+								aria-disabled={ isDisabled }
+								onClick={
+									isDisabled
+										? undefined
+										: ( e: React.MouseEvent< HTMLLIElement > ) => {
+												if ( ( e.target as HTMLElement ).closest( 'button' ) ) {
+													return;
+												}
+												onSelect( item.value );
+												onClose();
+										  }
+								}
+								onKeyDown={ ( event: React.KeyboardEvent< HTMLLIElement > ) => {
+									if ( event.key === 'Enter' && ! isDisabled ) {
 										onSelect( item.value );
 										onClose();
 									}
@@ -171,13 +178,13 @@ export const PopoverMenuList = < T, V extends string >( {
 									}
 								} }
 								tabIndex={ isSelected ? 0 : tabIndexFallback }
-								style={ {
+								sx={ {
 									transform: `translateY(${ virtualRow.start + MENU_LIST_PADDING_TOP }px)`,
 									...( itemStyle ? itemStyle( item ) : {} ),
 								} }
 							>
 								{ menuItemContentTemplate ? menuItemContentTemplate( item ) : item.label || item.value }
-							</li>
+							</ListItem>
 						);
 					} ) }
 				</MenuListComponent>
@@ -203,6 +210,9 @@ export const StyledMenuList = styled( MenuList )( ( { theme } ) => ( {
 		'&[aria-selected="true"]': {
 			backgroundColor: theme.palette.action.selected,
 		},
+		'&[aria-disabled="true"]': {
+			color: theme.palette.text.disabled,
+		},
 		cursor: 'pointer',
 		textOverflow: 'ellipsis',
 		position: 'absolute',

package/src/components/save-changes-dialog.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { AlertTriangleFilledIcon, XIcon } from '@elementor/icons';
+import {
+	Button,
+	Dialog,
+	DialogActions,
+	DialogContent,
+	DialogContentText,
+	type DialogContentTextProps,
+	type DialogProps,
+	DialogTitle,
+	IconButton,
+	Stack,
+} from '@elementor/ui';
+
+const TITLE_ID = 'save-changes-dialog';
+
+export const SaveChangesDialog = ( { children, onClose }: Pick< DialogProps, 'children' | 'onClose' > ) => (
+	<Dialog open onClose={ onClose } aria-labelledby={ TITLE_ID } maxWidth="xs">
+		{ children }
+	</Dialog>
+);
+
+const SaveChangesDialogTitle = ( { children, onClose }: React.PropsWithChildren & { onClose?: () => void } ) => (
+	<DialogTitle
+		id={ TITLE_ID }
+		display="flex"
+		alignItems="center"
+		gap={ 1 }
+		sx={ { lineHeight: 1, justifyContent: 'space-between' } }
+	>
+		<Stack direction="row" alignItems="center" gap={ 1 }>
+			<AlertTriangleFilledIcon color="secondary" />
+			{ children }
+		</Stack>
+		{ onClose && (
+			<IconButton onClick={ onClose } size="small">
+				<XIcon />
+			</IconButton>
+		) }
+	</DialogTitle>
+);
+
+const SaveChangesDialogContent = ( { children }: React.PropsWithChildren ) => (
+	<DialogContent>{ children }</DialogContent>
+);
+
+const SaveChangesDialogContentText = ( props: DialogContentTextProps ) => (
+	<DialogContentText variant="body2" color="textPrimary" display="flex" flexDirection="column" { ...props } />
+);
+
+type Action = {
+	label: string;
+	action: () => void | Promise< void >;
+};
+
+type ConfirmationDialogActionsProps = {
+	actions: {
+		cancel?: Action;
+		confirm: Action;
+		discard?: Action;
+	};
+};
+
+const SaveChangesDialogActions = ( { actions }: ConfirmationDialogActionsProps ) => {
+	const [ isConfirming, setIsConfirming ] = useState( false );
+	const { cancel, confirm, discard } = actions;
+
+	const onConfirm = async () => {
+		setIsConfirming( true );
+		await confirm.action();
+		setIsConfirming( false );
+	};
+	return (
+		<DialogActions>
+			{ cancel && (
+				<Button variant="text" color="secondary" onClick={ cancel.action }>
+					{ cancel.label }
+				</Button>
+			) }
+			{ discard && (
+				<Button variant="text" color="secondary" onClick={ discard.action }>
+					{ discard.label }
+				</Button>
+			) }
+			<Button variant="contained" color="secondary" onClick={ onConfirm } loading={ isConfirming }>
+				{ confirm.label }
+			</Button>
+		</DialogActions>
+	);
+};
+
+SaveChangesDialog.Title = SaveChangesDialogTitle;
+SaveChangesDialog.Content = SaveChangesDialogContent;
+SaveChangesDialog.ContentText = SaveChangesDialogContentText;
+SaveChangesDialog.Actions = SaveChangesDialogActions;
+
+export const useDialog = () => {
+	const [ isOpen, setIsOpen ] = useState( false );
+
+	const open = () => setIsOpen( true );
+	const close = () => setIsOpen( false );
+
+	return { isOpen, open, close };
+};

package/src/components/{popover/search.tsx → search-field.tsx}

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRef } from 'react';
 import { SearchIcon, XIcon } from '@elementor/icons';
-import { Box, IconButton, InputAdornment, TextField } from '@elementor/ui';
+import { Box, type BoxProps, IconButton, InputAdornment, TextField } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 const SIZE = 'tiny';
@@ -10,9 +10,10 @@ type Props = {
 	value: string;
 	onSearch: ( search: string ) => void;
 	placeholder: string;
-};
+	id?: string;
+} & BoxProps;
 
-export const PopoverSearch = ( { value, onSearch, placeholder }: Props ) => {
+export const SearchField = ( { value, onSearch, placeholder, id, sx }: Props ) => {
 	const inputRef = useRef< HTMLInputElement | null >( null );
 
 	const handleClear = () => {
@@ -26,11 +27,12 @@ export const PopoverSearch = ( { value, onSearch, placeholder }: Props ) => {
 	};
 
 	return (
-		<Box sx={ { px: 2, pb: 1.5 } }>
+		<Box sx={ { px: 2, pb: 1.5, ...sx } }>
 			<TextField
 				// eslint-disable-next-line jsx-a11y/no-autofocus
 				autoFocus
 				fullWidth
+				id={ id }
 				size={ SIZE }
 				value={ value }
 				inputRef={ inputRef }

package/src/components/warning-infotip.tsx

@@ -9,10 +9,14 @@ interface WarningInfotipProps extends PropsWithChildren {
 	placement: InfotipProps[ 'placement' ];
 	width?: string | number;
 	offset?: number[];
+	hasError?: boolean;
 }
 
 export const WarningInfotip = forwardRef(
-	( { children, open, title, text, placement, width, offset }: WarningInfotipProps, ref: unknown ) => {
+	(
+		{ children, open, title, text, placement, width, offset, hasError = true }: WarningInfotipProps,
+		ref: unknown
+	) => {
 		return (
 			<Infotip
 				ref={ ref }
@@ -27,7 +31,12 @@ export const WarningInfotip = forwardRef(
 				} }
 				arrow={ false }
 				content={
-					<Alert color="error" severity="warning" variant="standard" size="small">
+					<Alert
+						color={ hasError ? 'error' : 'secondary' }
+						severity="warning"
+						variant="standard"
+						size="small"
+					>
 						{ title ? <AlertTitle>{ title }</AlertTitle> : null }
 						{ text }
 					</Alert>

package/src/hooks/__tests__/use-editable.test.tsx

@@ -0,0 +1,255 @@
+import * as React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+import { EditableField } from '../../components/editable-field';
+import { useEditable } from '../use-editable';
+
+// Test utility component that uses the hook with EditableField
+const TestComponent = ( {
+	value,
+	onSubmit,
+	validation,
+	onClick,
+	onError,
+}: {
+	value: string;
+	onSubmit: ( value: string ) => unknown;
+	validation?: ( value: string ) => string | null;
+	onClick?: ( event: React.MouseEvent< HTMLDivElement > ) => void;
+	onError?: ( error: string | null ) => void;
+} ) => {
+	const { ref, isEditing, openEditMode, error, getProps } = useEditable( {
+		value,
+		onSubmit,
+		validation,
+		onClick,
+		onError,
+	} );
+
+	return (
+		<div>
+			<button onClick={ openEditMode } data-testid="open-edit">
+				Open Edit
+			</button>
+			<EditableField ref={ ref } { ...getProps() } data-testid="editable-field" />
+			<div data-testid="editing-state">{ isEditing ? 'editing' : 'not-editing' }</div>
+			<div data-testid="error-state">{ error || 'no-error' }</div>
+		</div>
+	);
+};
+
+describe( 'useEditable', () => {
+	it( 'should return editable content attributes and handlers', () => {
+		// Arrange & Act.
+		render( <TestComponent value="" onSubmit={ jest.fn() } /> );
+
+		// Assert.
+		const editableField = screen.getByRole( 'textbox' );
+
+		expect( editableField ).toHaveAttribute( 'role', 'textbox' );
+		expect( editableField ).toHaveAttribute( 'contentEditable', 'false' );
+		expect( editableField ).toHaveTextContent( '' );
+	} );
+
+	it( 'should set editable to true', () => {
+		// Arrange & Act.
+		render( <TestComponent value="" onSubmit={ jest.fn() } /> );
+
+		// Assert.
+		const editableField = screen.getByRole( 'textbox' );
+		const editingState = screen.getByText( 'not-editing' );
+		const openEditButton = screen.getByRole( 'button', { name: 'Open Edit' } );
+
+		expect( editingState ).toHaveTextContent( 'not-editing' );
+		expect( editableField ).toHaveAttribute( 'contentEditable', 'false' );
+
+		// Act.
+		fireEvent.click( openEditButton );
+
+		// Assert.
+		expect( screen.getByText( 'editing' ) ).toBeInTheDocument();
+		expect( editableField ).toHaveAttribute( 'contentEditable', 'true' );
+	} );
+
+	it( 'should call onSubmit with the new value on enter', async () => {
+		// Arrange.
+		const onSubmit = jest.fn();
+		const newValue = 'New value';
+		const validation = jest.fn().mockReturnValue( null );
+
+		render( <TestComponent value={ 'Some value' } onSubmit={ onSubmit } validation={ validation } /> );
+
+		const editableField = screen.getByRole( 'textbox' );
+		const openEditButton = screen.getByRole( 'button', { name: 'Open Edit' } );
+
+		// Mock the blur method to trigger onBlur event
+		mockBlur( editableField );
+
+		// Act.
+		fireEvent.click( openEditButton );
+
+		fireEvent.input( editableField, { target: { innerText: newValue } } );
+
+		// Assert.
+		expect( validation ).toHaveBeenCalledWith( newValue );
+
+		// Act.
+		fireEvent.keyDown( editableField, { key: 'Enter' } );
+
+		// Assert.
+		await waitFor( () => {
+			expect( onSubmit ).toHaveBeenCalledWith( newValue );
+		} );
+	} );
+
+	it( 'should remove the editable content attribute on blur', () => {
+		// Arrange & Act.
+		render( <TestComponent value="" onSubmit={ jest.fn() } /> );
+
+		fireEvent.click( screen.getByRole( 'button', { name: 'Open Edit' } ) );
+
+		// Assert.
+		expect( screen.getByText( 'editing' ) ).toBeInTheDocument();
+
+		// Act.
+		fireEvent.blur( screen.getByRole( 'textbox' ) );
+
+		// Assert.
+		expect( screen.getByText( 'not-editing' ) ).toBeInTheDocument();
+	} );
+
+	it( 'should call onSubmit with the new value on blur', () => {
+		// Arrange.
+		const onSubmit = jest.fn();
+		const newValue = 'New value';
+		const validation = jest.fn().mockReturnValue( null );
+
+		render( <TestComponent value={ 'Some value' } onSubmit={ onSubmit } validation={ validation } /> );
+
+		const editableField = screen.getByRole( 'textbox' );
+
+		// Act.
+		fireEvent.click( screen.getByRole( 'button', { name: 'Open Edit' } ) );
+
+		fireEvent.input( editableField, { target: { innerText: newValue } } );
+
+		// Assert.
+		expect( validation ).toHaveBeenCalledWith( newValue );
+
+		// Act.
+		fireEvent.blur( editableField );
+
+		// Assert.
+		expect( onSubmit ).toHaveBeenCalledWith( newValue );
+	} );
+
+	it( 'should set error message id validation fails on enter, and keep the edit mode open', () => {
+		// Arrange.
+		const newValue = 'invalid-value';
+		const onSubmit = jest.fn();
+
+		const validation = ( v: string ) => {
+			if ( v === newValue ) {
+				return 'Nope';
+			}
+
+			return null;
+		};
+
+		render( <TestComponent value={ 'Some value' } onSubmit={ onSubmit } validation={ validation } /> );
+
+		// Act.
+		fireEvent.click( screen.getByRole( 'button', { name: 'Open Edit' } ) );
+
+		// Assert.
+		expect( screen.getByText( 'no-error' ) ).toBeInTheDocument();
+
+		// Act.
+		const editableField = screen.getByRole( 'textbox' );
+		fireEvent.input( editableField, { target: { innerText: newValue } } );
+
+		// Assert.
+		expect( screen.getByText( 'Nope' ) ).toBeInTheDocument();
+
+		// Act.
+		fireEvent.keyDown( editableField, { key: 'Enter' } );
+
+		// Assert.
+		expect( onSubmit ).not.toHaveBeenCalled();
+		expect( editableField ).toHaveAttribute( 'contentEditable', 'true' );
+	} );
+
+	it( 'should not run validation & submit if the value has not changed', () => {
+		// Arrange.
+		const value = 'initial value';
+		const onSubmit = jest.fn();
+
+		const validation = () => {
+			return 'test-error';
+		};
+
+		render( <TestComponent value={ value } onSubmit={ onSubmit } validation={ validation } /> );
+
+		const editableField = screen.getByRole( 'textbox' );
+		const openEditButton = screen.getByRole( 'button', { name: 'Open Edit' } );
+
+		// Act.
+		fireEvent.click( openEditButton );
+
+		// Assert.
+		expect( screen.getByText( 'no-error' ) ).toBeInTheDocument();
+
+		// Act.
+		fireEvent.input( editableField, { target: { innerText: 'new value' } } );
+
+		// Assert.
+		expect( screen.getByText( 'test-error' ) ).toBeInTheDocument();
+
+		// Act.
+		fireEvent.input( editableField, { target: { innerText: value } } );
+
+		// Assert.
+		expect( screen.getByText( 'no-error' ) ).toBeInTheDocument();
+
+		// Act.
+		fireEvent.keyDown( editableField, { key: 'Enter' } );
+
+		// Assert.
+		expect( onSubmit ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should not submit, and only close the edit mode on blur if there is an error', () => {
+		// Arrange.
+		const onSubmit = jest.fn();
+		const newValue = 'invalid-value';
+		const validation = jest.fn().mockReturnValue( 'Nope' );
+
+		render( <TestComponent value={ 'Some value' } onSubmit={ onSubmit } validation={ validation } /> );
+
+		const editableField = screen.getByRole( 'textbox' );
+		const openEditButton = screen.getByRole( 'button', { name: 'Open Edit' } );
+
+		// Act.
+		fireEvent.click( openEditButton );
+
+		fireEvent.input( editableField, { target: { innerText: newValue } } );
+
+		// Assert.
+		expect( validation ).toHaveBeenCalledWith( newValue );
+
+		// Act.
+		fireEvent.blur( editableField );
+
+		// Assert.
+		expect( onSubmit ).not.toHaveBeenCalled();
+		expect( screen.getByText( 'not-editing' ) ).toBeInTheDocument();
+	} );
+} );
+
+function mockBlur( element: HTMLElement ) {
+	const originalBlur = element.blur;
+	element.blur = jest.fn( () => {
+		originalBlur.call( element );
+		fireEvent.blur( element );
+	} );
+}

package/src/hooks/use-editable.ts

@@ -21,8 +21,6 @@ export const useEditable = ( { value, onSubmit, validation, onClick, onError }:
 	};
 
 	const closeEditMode = () => {
-		ref.current?.blur();
-
 		setError( null );
 		onError?.( null );
 		setIsEditing( false );
@@ -30,6 +28,7 @@ export const useEditable = ( { value, onSubmit, validation, onClick, onError }:
 
 	const submit = ( newValue: string ) => {
 		if ( ! isDirty( newValue ) ) {
+			closeEditMode();
 			return;
 		}
 
@@ -62,7 +61,10 @@ export const useEditable = ( { value, onSubmit, validation, onClick, onError }:
 
 		if ( [ 'Enter' ].includes( event.key ) ) {
 			event.preventDefault();
-			return submit( ( event.target as HTMLElement ).innerText );
+			// submission is invoked only on blur, to avoid issues with double-submission in certain cases
+			if ( ! error ) {
+				ref.current?.blur();
+			}
 		}
 	};
 
@@ -74,11 +76,20 @@ export const useEditable = ( { value, onSubmit, validation, onClick, onError }:
 		onClick?.( event );
 	};
 
+	const handleBlur = () => {
+		if ( error ) {
+			closeEditMode();
+			return;
+		}
+
+		submit( ( ref.current as HTMLElement ).innerText );
+	};
+
 	const listeners = {
 		onClick: handleClick,
 		onKeyDown: handleKeyDown,
 		onInput: onChange,
-		onBlur: closeEditMode,
+		onBlur: handleBlur,
 	} as const;
 
 	const attributes = {

package/src/index.ts

@@ -7,7 +7,12 @@ export { MenuListItem, MenuItemInfotip } from './components/menu-item';
 export { InfoTipCard } from './components/infotip-card';
 export { InfoAlert } from './components/info-alert';
 export { WarningInfotip } from './components/warning-infotip';
+export { GlobalDialog, openDialog, closeDialog } from './components/global-dialog';
+export { SearchField } from './components/search-field';
+export { Form } from './components/form';
+
 export * from './components/popover';
+export * from './components/save-changes-dialog';
 
 // hooks
 export { useEditable } from './hooks/use-editable';