@elementor/editor-site-navigation 0.22.5 → 0.22.7

package/src/components/panel/posts-list/error-state.tsx

@@ -4,34 +4,42 @@ import { __ } from '@wordpress/i18n';
 import * as React from 'react';
 
 export default function ErrorState() {
-	return ( <Box sx={ {
-		display: 'flex',
-		flexDirection: 'column',
-		justifyContent: 'center',
-		alignItems: 'center',
-		pt: '40px',
-		gap: '16px',
-	} }>
-		<Error404TemplateIcon />
-		<Box sx={ {
-			display: 'flex',
-			flexDirection: 'column',
-			justifyContent: 'center',
-			alignItems: 'center',
-			gap: '8px',
-		} }>
-			<Typography variant="body1" color="text.primary">
-				{ __( 'We couldn’t display your pages.', 'elementor' ) }
-			</Typography>
-			<Box>
-				<Typography variant="body2" color="text.primary" sx={ { textAlign: 'center' } }>
-					{ __( 'It’s probably a temporary issue.', 'elementor' ) }
+	return (
+		<Box
+			sx={ {
+				display: 'flex',
+				flexDirection: 'column',
+				justifyContent: 'center',
+				alignItems: 'center',
+				pt: '40px',
+				gap: '16px',
+			} }
+		>
+			<Error404TemplateIcon />
+			<Box
+				sx={ {
+					display: 'flex',
+					flexDirection: 'column',
+					justifyContent: 'center',
+					alignItems: 'center',
+					gap: '8px',
+				} }
+			>
+				<Typography variant="body1" color="text.primary">
+					{ __( 'We couldn’t display your pages.', 'elementor' ) }
 				</Typography>
-				<Typography variant="body2" color="text.primary" sx={ { textAlign: 'center' } }>
-					{ __( 'If the problem persists,', 'elementor' ) } <Link target="_blank" href="https://go.elementor.com/wp-editor-support-open-ticket/">Notify support</Link>
-				</Typography>
-
+				<Box>
+					<Typography variant="body2" color="text.primary" sx={ { textAlign: 'center' } }>
+						{ __( 'It’s probably a temporary issue.', 'elementor' ) }
+					</Typography>
+					<Typography variant="body2" color="text.primary" sx={ { textAlign: 'center' } }>
+						{ __( 'If the problem persists,', 'elementor' ) }{ ' ' }
+						<Link target="_blank" href="https://go.elementor.com/wp-editor-support-open-ticket/">
+							Notify support
+						</Link>
+					</Typography>
+				</Box>
 			</Box>
 		</Box>
-	</Box> );
+	);
 }

package/src/components/panel/posts-list/list-items/edit-mode-template.tsx

@@ -1,28 +1,21 @@
 import * as React from 'react';
 import { useState, useRef, FormEvent, MutableRefObject, FocusEvent } from 'react';
-import {
-	Box,
-	ListItem,
-	TextField,
-	IconButton,
-	CircularProgress,
-	ListItemText,
-} from '@elementor/ui';
+import { Box, ListItem, TextField, IconButton, CircularProgress, ListItemText } from '@elementor/ui';
 import { XIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
 import { usePostListContext } from '../../../../contexts/post-list-context';
 
 type Props = {
-	postTitle: string,
-	isLoading: boolean,
-	callback: ( inputValue: string ) => void,
-}
+	postTitle: string;
+	isLoading: boolean;
+	callback: ( inputValue: string ) => void;
+};
 
 export default function EditModeTemplate( { postTitle, isLoading, callback }: Props ) {
 	const [ title, setTitle ] = useState( postTitle );
 	const [ touched, setTouched ] = useState( false );
-	const [ inputError, setInputError ] = useState<string | null>( null );
-	const closeButton = useRef<HTMLButtonElement>();
+	const [ inputError, setInputError ] = useState< string | null >( null );
+	const closeButton = useRef< HTMLButtonElement >();
 
 	const onBlur = ( e: FocusEvent ) => {
 		if ( closeButton.current === e.relatedTarget ) {
@@ -32,7 +25,7 @@ export default function EditModeTemplate( { postTitle, isLoading, callback }: Pr
 		runCallback();
 	};
 
-	const onFormSubmit = ( e: FormEvent<HTMLFormElement> ) => {
+	const onFormSubmit = ( e: FormEvent< HTMLFormElement > ) => {
 		e.preventDefault();
 		runCallback();
 	};
@@ -49,7 +42,7 @@ export default function EditModeTemplate( { postTitle, isLoading, callback }: Pr
 		callback( title );
 	};
 
-	const onChange = ( e: React.ChangeEvent<{ value: string; }> ) => {
+	const onChange = ( e: React.ChangeEvent< { value: string } > ) => {
 		if ( ! touched ) {
 			setTouched( true );
 		}
@@ -65,9 +58,7 @@ export default function EditModeTemplate( { postTitle, isLoading, callback }: Pr
 
 	return (
 		<>
-			<ListItem
-				secondaryAction={ <CloseButton isLoading={ isLoading } closeButton={ closeButton } /> }
-			>
+			<ListItem secondaryAction={ <CloseButton isLoading={ isLoading } closeButton={ closeButton } /> }>
 				<Box width="100%" component="form" onSubmit={ onFormSubmit }>
 					<TextField
 						autoFocus // eslint-disable-line jsx-a11y/no-autofocus
@@ -83,39 +74,26 @@ export default function EditModeTemplate( { postTitle, isLoading, callback }: Pr
 					/>
 				</Box>
 			</ListItem>
-			{
-				inputError &&
+			{ inputError && (
 				<ListItem>
-					<ListItemText sx={ { color: 'error.main' } }>
-						{ inputError }
-					</ListItemText>
+					<ListItemText sx={ { color: 'error.main' } }>{ inputError }</ListItemText>
 				</ListItem>
-			}
+			) }
 		</>
 	);
 }
 
 type CloseButtonProps = {
-	isLoading: boolean,
-	closeButton: MutableRefObject<HTMLButtonElement | undefined>,
-}
+	isLoading: boolean;
+	closeButton: MutableRefObject< HTMLButtonElement | undefined >;
+};
 
 function CloseButton( { isLoading, closeButton }: CloseButtonProps ) {
 	const { resetEditMode } = usePostListContext();
 
 	return (
-		<IconButton
-			size="small"
-			color="secondary"
-			onClick={ resetEditMode }
-			ref={ closeButton }
-			disabled={ isLoading }
-		>
-			{
-				isLoading
-					? <CircularProgress />
-					: <XIcon fontSize="small" />
-			}
+		<IconButton size="small" color="secondary" onClick={ resetEditMode } ref={ closeButton } disabled={ isLoading }>
+			{ isLoading ? <CircularProgress /> : <XIcon fontSize="small" /> }
 		</IconButton>
 	);
 }

package/src/components/panel/posts-list/list-items/list-item-create.tsx

@@ -27,6 +27,10 @@ export default function ListItemCreate() {
 	};
 
 	return (
-		<EditModeTemplate postTitle={ __( 'New Page', 'elementor' ) } isLoading={ createPost.isPending } callback={ createPostCallback } />
+		<EditModeTemplate
+			postTitle={ __( 'New Page', 'elementor' ) }
+			isLoading={ createPost.isPending }
+			callback={ createPostCallback }
+		/>
 	);
 }

package/src/components/panel/posts-list/list-items/list-item-duplicate.tsx

@@ -31,6 +31,10 @@ export default function ListItemDuplicate() {
 	};
 
 	return (
-		<EditModeTemplate postTitle={ `${ editMode.details.title } ${ __( 'copy', 'elementor' ) }` } isLoading={ duplicatePost.isPending } callback={ duplicatePostCallback } />
+		<EditModeTemplate
+			postTitle={ `${ editMode.details.title } ${ __( 'copy', 'elementor' ) }` }
+			isLoading={ duplicatePost.isPending }
+			callback={ duplicatePostCallback }
+		/>
 	);
 }

package/src/components/panel/posts-list/list-items/list-item-rename.tsx

@@ -7,8 +7,8 @@ import { __useActiveDocument as useActiveDocument } from '@elementor/editor-docu
 import useRenameActiveDocument from '../../../../hooks/use-rename-active-document';
 
 type Props = {
-	post: Post,
-}
+	post: Post;
+};
 
 export default function ListItemRename( { post }: Props ) {
 	const { type, resetEditMode } = usePostListContext();
@@ -41,7 +41,5 @@ export default function ListItemRename( { post }: Props ) {
 		}
 	};
 
-	return (
-		<EditModeTemplate postTitle={ title } isLoading={ updatePost.isPending } callback={ renamePostCallback } />
-	);
+	return <EditModeTemplate postTitle={ title } isLoading={ updatePost.isPending } callback={ renamePostCallback } />;
 }

package/src/components/panel/posts-list/list-items/list-item-view.tsx

@@ -13,7 +13,10 @@ import {
 	usePopupState,
 } from '@elementor/ui';
 import { DotsVerticalIcon, HomeIcon } from '@elementor/icons';
-import { __useActiveDocument as useActiveDocument, __useNavigateToDocument as useNavigateToDocument } from '@elementor/editor-documents';
+import {
+	__useActiveDocument as useActiveDocument,
+	__useNavigateToDocument as useNavigateToDocument,
+} from '@elementor/editor-documents';
 import PageTitleAndStatus from '../../../shared/page-title-and-status';
 import Rename from '../../actions-menu/actions/rename';
 import Duplicate from '../../actions-menu/actions/duplicate';
@@ -23,18 +26,22 @@ import SetHome from '../../actions-menu/actions/set-home';
 import { Post } from '../../../../types';
 import { __ } from '@wordpress/i18n';
 
-const DisabledPostTooltip = ( { children, isDisabled }: {children: React.ReactNode, isDisabled: boolean} ) => {
+const DisabledPostTooltip = ( { children, isDisabled }: { children: React.ReactNode; isDisabled: boolean } ) => {
 	if ( isDisabled ) {
-		const title = <Typography variant="caption">You cannot edit this page.<br />To edit it directly, contact the site owner</Typography>;
+		const title = (
+			<Typography variant="caption">
+				You cannot edit this page.
+				<br />
+				To edit it directly, contact the site owner
+			</Typography>
+		);
 
-		return <Tooltip
-			title={ title }
-			placement="bottom"
-			arrow={ false }
-		>
-			{ /* @see https://mui.com/material-ui/react-tooltip/#disabled-elements */ }
-			{ children }
-		</Tooltip>;
+		return (
+			<Tooltip title={ title } placement="bottom" arrow={ false }>
+				{ /* @see https://mui.com/material-ui/react-tooltip/#disabled-elements */ }
+				{ children }
+			</Tooltip>
+		);
 	}
 
 	return <>{ children }</>;
@@ -61,11 +68,7 @@ export default function ListItemView( { post }: { post: Post } ) {
 				<ListItem
 					disablePadding
 					secondaryAction={
-						<IconButton
-							value
-							size="small"
-							{ ...bindTrigger( popupState ) }
-						>
+						<IconButton value size="small" { ...bindTrigger( popupState ) }>
 							<DotsVerticalIcon fontSize="small" />
 						</IconButton>
 					}
@@ -83,9 +86,7 @@ export default function ListItemView( { post }: { post: Post } ) {
 						<ListItemText disableTypography={ true }>
 							<PageTitleAndStatus title={ title } status={ status } />
 						</ListItemText>
-						{ post.isHome &&
-						<HomeIcon titleAccess={ __( 'Homepage', 'elementor' ) } color="disabled" />
-						}
+						{ post.isHome && <HomeIcon titleAccess={ __( 'Homepage', 'elementor' ) } color="disabled" /> }
 					</ListItemButton>
 				</ListItem>
 			</DisabledPostTooltip>

package/src/components/panel/posts-list/posts-collapsible-list.tsx

@@ -11,12 +11,19 @@ import AddNewButton from '../add-new-button';
 import ErrorState from './error-state';
 
 type Props = {
-	isOpenByDefault?: boolean,
-}
+	isOpenByDefault?: boolean;
+};
 
 export default function PostsCollapsibleList( { isOpenByDefault = false }: Props ) {
 	const { type, editMode } = usePostListContext();
-	const { data: { posts, total }, isLoading: postsLoading, isError: postsError, fetchNextPage, hasNextPage, isFetchingNextPage } = usePosts( type );
+	const {
+		data: { posts, total },
+		isLoading: postsLoading,
+		isError: postsError,
+		fetchNextPage,
+		hasNextPage,
+		isFetchingNextPage,
+	} = usePosts( type );
 	const { data: homepageId } = useHomepage();
 
 	if ( postsError ) {
@@ -26,14 +33,10 @@ export default function PostsCollapsibleList( { isOpenByDefault = false }: Props
 	if ( ! posts || postsLoading ) {
 		return (
 			<Box sx={ { px: 5 } }>
-				<Box
-					display="flex"
-					justifyContent="flex-end"
-					alignItems="center"
-				>
+				<Box display="flex" justifyContent="flex-end" alignItems="center">
 					<Skeleton sx={ { my: 4 } } animation="wave" variant="rounded" width="110px" height="28px" />
 				</Box>
-				<Box >
+				<Box>
 					<Skeleton sx={ { my: 3 } } animation="wave" variant="rounded" width="100%" height="24px" />
 					<Skeleton sx={ { my: 3 } } animation="wave" variant="rounded" width="70%" height="24px" />
 					<Skeleton sx={ { my: 3 } } animation="wave" variant="rounded" width="70%" height="24px" />
@@ -79,28 +82,23 @@ export default function PostsCollapsibleList( { isOpenByDefault = false }: Props
 				<AddNewButton />
 			</Box>
 			<List dense>
-				<CollapsibleList
-					label={ label }
-					Icon={ PageTypeIcon }
-					isOpenByDefault={ isOpenByDefault || false }
-				>
+				<CollapsibleList label={ label } Icon={ PageTypeIcon } isOpenByDefault={ isOpenByDefault || false }>
 					{ sortedPosts.map( ( post ) => {
 						return <PostListItem key={ post.id } post={ post } />;
 					} ) }
-					{
-						[ 'duplicate', 'create' ].includes( editMode.mode ) &&
-						<PostListItem />
-					}
-					{ hasNextPage &&
-						<Box sx={ {
-							display: 'flex',
-							justifyContent: 'center',
-						} }>
+					{ [ 'duplicate', 'create' ].includes( editMode.mode ) && <PostListItem /> }
+					{ hasNextPage && (
+						<Box
+							sx={ {
+								display: 'flex',
+								justifyContent: 'center',
+							} }
+						>
 							<Button onClick={ fetchNextPage } color="secondary">
 								{ isFetchingNextPage ? <CircularProgress /> : 'Load More' }
 							</Button>
 						</Box>
-					}
+					) }
 				</CollapsibleList>
 			</List>
 		</>

package/src/components/shared/page-title-and-status.tsx

@@ -42,10 +42,12 @@ const PageTitle = ( { title }: { title: string } ) => {
 	);
 };
 
-export default function PageTitleAndStatus( { title, status }: { title: string, status: string } ) {
+export default function PageTitleAndStatus( { title, status }: { title: string; status: string } ) {
 	return (
 		<Box display="flex">
-			<PageTitle title={ title } />&nbsp;<PageStatus status={ status } />
+			<PageTitle title={ title } />
+			&nbsp;
+			<PageStatus status={ status } />
 		</Box>
 	);
 }

package/src/components/top-bar/__tests__/add-new-page.test.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { __useActiveDocument as useActiveDocument, __useNavigateToDocument as useNavigateToDocument } from '@elementor/editor-documents';
+import {
+	__useActiveDocument as useActiveDocument,
+	__useNavigateToDocument as useNavigateToDocument,
+} from '@elementor/editor-documents';
 import RecentlyEdited from '../recently-edited';
 import { createMockDocument } from 'test-utils';
 import useRecentPosts from '../../../hooks/use-recent-posts';
@@ -24,14 +27,17 @@ jest.mock( '../../../hooks/use-create-page', () => ( {
 	default: jest.fn( () => ( { create: jest.fn(), isLoading: false } ) ),
 } ) );
 
-jest.mock( '../../../hooks/use-user', () => (
-	{
-		default: jest.fn( () => ( { isLoading: false, data: { capabilities: {
-			edit_pages: true,
-		} } } ) ),
-		__esModule: true,
-	}
-) );
+jest.mock( '../../../hooks/use-user', () => ( {
+	default: jest.fn( () => ( {
+		isLoading: false,
+		data: {
+			capabilities: {
+				edit_pages: true,
+			},
+		},
+	} ) ),
+	__esModule: true,
+} ) );
 
 describe( '@elementor/recently-edited - Top bar add new page', () => {
 	beforeEach( () => {
@@ -47,7 +53,9 @@ describe( '@elementor/recently-edited - Top bar add new page', () => {
 		const isLoading = false;
 		const recentPosts: RecentPost[] = [];
 
-		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, data: recentPosts } as ReturnType<typeof useRecentPosts> );
+		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, data: recentPosts } as ReturnType<
+			typeof useRecentPosts
+		> );
 
 		render( <RecentlyEdited /> );
 
@@ -67,7 +75,9 @@ describe( '@elementor/recently-edited - Top bar add new page', () => {
 		const create = jest.fn().mockReturnValue( Promise.resolve( { id: 123 } ) );
 		const navigateToDocument = jest.fn();
 
-		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, data: recentPosts } as ReturnType<typeof useRecentPosts> );
+		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, data: recentPosts } as ReturnType<
+			typeof useRecentPosts
+		> );
 		jest.mocked( useCreatePage ).mockReturnValue( { isLoading, create } );
 		jest.mocked( useNavigateToDocument ).mockReturnValue( navigateToDocument );
 
@@ -90,14 +100,21 @@ describe( '@elementor/recently-edited - Top bar add new page', () => {
 
 	it( 'should be disabled if user does not have edit_posts capability', () => {
 		// Arrange.
-		jest.mocked( useUser ).mockReturnValue( { isLoading: false, data: { capabilities: {
-			edit_pages: false,
-		} } } as unknown as ReturnType<typeof useUser> );
+		jest.mocked( useUser ).mockReturnValue( {
+			isLoading: false,
+			data: {
+				capabilities: {
+					edit_pages: false,
+				},
+			},
+		} as unknown as ReturnType< typeof useUser > );
 
 		const isLoading = false;
 		const recentPosts: RecentPost[] = [];
 
-		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, data: recentPosts } as ReturnType<typeof useRecentPosts> );
+		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, data: recentPosts } as ReturnType<
+			typeof useRecentPosts
+		> );
 
 		render( <RecentlyEdited /> );
 
@@ -106,7 +123,7 @@ describe( '@elementor/recently-edited - Top bar add new page', () => {
 		fireEvent.click( buttons[ 0 ] ); // Opens the recently edited menu
 
 		// Assert.
-		const addNewPage = screen.getByRole( 'menuitem', { name: /Add new page/i }, );
+		const addNewPage = screen.getByRole( 'menuitem', { name: /Add new page/i } );
 		expect( addNewPage ).toHaveAttribute( 'aria-disabled', 'true' );
 	} );
 } );