@elementor/editor-site-navigation 0.22.5 → 0.22.7

package/src/components/top-bar/__tests__/recently-edited.test.tsx

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { __useHostDocument as useHostDocument, __useActiveDocument as useActiveDocument, __useNavigateToDocument as useNavigateToDocument } from '@elementor/editor-documents';
+import {
+	__useHostDocument as useHostDocument,
+	__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';
@@ -12,29 +16,32 @@ jest.mock( '@elementor/editor-documents', () => ( {
 	__useNavigateToDocument: jest.fn(),
 } ) );
 
-jest.mock( '../../../hooks/use-recent-posts', () => (
-	{
-		default: jest.fn( () => ( { isLoading: false, data: [] } ) ),
-		__esModule: true,
-	}
-) );
-
-jest.mock( '../../../hooks/use-user', () => (
-	{
-		default: jest.fn( () => ( { isLoading: false, data: { capabilities: {
-			edit_posts: true,
-		} } } ) ),
-		__esModule: true,
-	}
-) );
+jest.mock( '../../../hooks/use-recent-posts', () => ( {
+	default: jest.fn( () => ( { isLoading: false, data: [] } ) ),
+	__esModule: true,
+} ) );
+
+jest.mock( '../../../hooks/use-user', () => ( {
+	default: jest.fn( () => ( {
+		isLoading: false,
+		data: {
+			capabilities: {
+				edit_posts: true,
+			},
+		},
+	} ) ),
+	__esModule: true,
+} ) );
 
 describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 	it( 'should show the title of the active document without its status when the document is published', async () => {
 		// Arrange.
-		jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument( {
-			id: 1,
-			title: 'Active Document',
-		} ) );
+		jest.mocked( useActiveDocument ).mockReturnValue(
+			createMockDocument( {
+				id: 1,
+				title: 'Active Document',
+			} )
+		);
 
 		// Act.
 		render( <RecentlyEdited /> );
@@ -46,14 +53,16 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 
 	it( 'should show the title of the active document with its status when the document is not published', async () => {
 		// Arrange.
-		jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument( {
-			id: 1,
-			title: 'Active Document',
-			status: {
-				value: 'draft',
-				label: 'Draft',
-			},
-		} ) );
+		jest.mocked( useActiveDocument ).mockReturnValue(
+			createMockDocument( {
+				id: 1,
+				title: 'Active Document',
+				status: {
+					value: 'draft',
+					label: 'Draft',
+				},
+			} )
+		);
 
 		// Act.
 		render( <RecentlyEdited /> );
@@ -67,10 +76,12 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 		// Arrange.
 		jest.mocked( useActiveDocument ).mockReturnValue( null );
 
-		jest.mocked( useHostDocument ).mockReturnValue( createMockDocument( {
-			id: 1,
-			title: 'Host Document',
-		} ) );
+		jest.mocked( useHostDocument ).mockReturnValue(
+			createMockDocument( {
+				id: 1,
+				title: 'Host Document',
+			} )
+		);
 
 		// Act.
 		render( <RecentlyEdited /> );
@@ -81,19 +92,23 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 
 	it( 'should show the title of the host document when the active document is kit', () => {
 		// Arrange.
-		jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument( {
-			id: 1,
-			title: 'Active Document',
-			type: {
-				value: 'kit',
-				label: 'Kit',
-			},
-		} ) );
+		jest.mocked( useActiveDocument ).mockReturnValue(
+			createMockDocument( {
+				id: 1,
+				title: 'Active Document',
+				type: {
+					value: 'kit',
+					label: 'Kit',
+				},
+			} )
+		);
 
-		jest.mocked( useHostDocument ).mockReturnValue( createMockDocument( {
-			id: 2,
-			title: 'Host Document',
-		} ) );
+		jest.mocked( useHostDocument ).mockReturnValue(
+			createMockDocument( {
+				id: 2,
+				title: 'Host Document',
+			} )
+		);
 
 		// Act.
 		render( <RecentlyEdited /> );
@@ -117,19 +132,23 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 
 	it( 'should show empty state', () => {
 		// Arrange.
-		jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument( {
-			id: 1,
-			title: 'Header',
-			type: {
-				value: 'header',
-				label: 'Header',
-			},
-		} ) );
+		jest.mocked( useActiveDocument ).mockReturnValue(
+			createMockDocument( {
+				id: 1,
+				title: 'Header',
+				type: {
+					value: 'header',
+					label: 'Header',
+				},
+			} )
+		);
 
 		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 /> );
 
@@ -144,32 +163,38 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 
 	it( 'should open the recently edited menu on click', () => {
 		// Arrange.
-		jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument( {
-			id: 1,
-			title: 'Header',
-			type: {
-				value: 'header',
-				label: 'Header',
-			},
-		} ) );
+		jest.mocked( useActiveDocument ).mockReturnValue(
+			createMockDocument( {
+				id: 1,
+				title: 'Header',
+				type: {
+					value: 'header',
+					label: 'Header',
+				},
+			} )
+		);
 
 		const isLoading = false;
-		const recentPosts: RecentPost[] = [ {
-			id: 2,
-			title: 'Test post',
-			edit_url: 'some_url',
-			type: {
-				post_type: 'post',
-				doc_type: 'wp-post',
-				label: 'Post',
-			},
-			date_modified: 123,
-			user_can: {
-				edit: true,
+		const recentPosts: RecentPost[] = [
+			{
+				id: 2,
+				title: 'Test post',
+				edit_url: 'some_url',
+				type: {
+					post_type: 'post',
+					doc_type: 'wp-post',
+					label: 'Post',
+				},
+				date_modified: 123,
+				user_can: {
+					edit: true,
+				},
 			},
-		} ];
+		];
 
-		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, data: recentPosts } as ReturnType<typeof useRecentPosts> );
+		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, data: recentPosts } as ReturnType<
+			typeof useRecentPosts
+		> );
 
 		render( <RecentlyEdited /> );
 
@@ -189,14 +214,16 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 
 	it( 'should render titles with HTML entities', () => {
 		// Arrange.
-		jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument( {
-			id: 1,
-			title: 'Header title with special char &#165;',
-			type: {
-				value: 'header',
-				label: 'Header',
-			},
-		} ) );
+		jest.mocked( useActiveDocument ).mockReturnValue(
+			createMockDocument( {
+				id: 1,
+				title: 'Header title with special char &#165;',
+				type: {
+					value: 'header',
+					label: 'Header',
+				},
+			} )
+		);
 
 		const isLoading = false;
 		const recentPosts: RecentPost[] = [
@@ -244,7 +271,9 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 			},
 		];
 
-		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, data: recentPosts } as ReturnType<typeof useRecentPosts> );
+		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, data: recentPosts } as ReturnType<
+			typeof useRecentPosts
+		> );
 
 		// Act.
 		render( <RecentlyEdited /> );
@@ -262,10 +291,12 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 
 	it( 'should navigate to document on click', () => {
 		// Arrange.
-		jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument( {
-			id: 1,
-			title: 'Test',
-		} ) );
+		jest.mocked( useActiveDocument ).mockReturnValue(
+			createMockDocument( {
+				id: 1,
+				title: 'Test',
+			} )
+		);
 
 		const navigateToDocument = jest.fn();
 
@@ -273,21 +304,23 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 
 		jest.mocked( useRecentPosts ).mockReturnValue( {
 			isLoading: false,
-			data: [ {
-				id: 123,
-				title: 'Test post',
-				edit_url: 'some_url',
-				type: {
-					post_type: 'post',
-					doc_type: 'wp-post',
-					label: 'Post',
-				},
-				date_modified: 123,
-				user_can: {
-					edit: true,
+			data: [
+				{
+					id: 123,
+					title: 'Test post',
+					edit_url: 'some_url',
+					type: {
+						post_type: 'post',
+						doc_type: 'wp-post',
+						label: 'Post',
+					},
+					date_modified: 123,
+					user_can: {
+						edit: true,
+					},
 				},
-			} ],
-		} as ReturnType<typeof useRecentPosts> );
+			],
+		} as ReturnType< typeof useRecentPosts > );
 
 		render( <RecentlyEdited /> );
 
@@ -304,10 +337,12 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 
 	it( 'should be disabled when user cant edit post', () => {
 		// Arrange.
-		jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument( {
-			id: 1,
-			title: 'Test',
-		} ) );
+		jest.mocked( useActiveDocument ).mockReturnValue(
+			createMockDocument( {
+				id: 1,
+				title: 'Test',
+			} )
+		);
 
 		const navigateToDocument = jest.fn();
 
@@ -315,21 +350,23 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 
 		jest.mocked( useRecentPosts ).mockReturnValue( {
 			isLoading: false,
-			data: [ {
-				id: 123,
-				title: 'Test post',
-				edit_url: 'some_url',
-				type: {
-					post_type: 'post',
-					doc_type: 'wp-post',
-					label: 'Post',
-				},
-				date_modified: 123,
-				user_can: {
-					edit: false,
+			data: [
+				{
+					id: 123,
+					title: 'Test post',
+					edit_url: 'some_url',
+					type: {
+						post_type: 'post',
+						doc_type: 'wp-post',
+						label: 'Post',
+					},
+					date_modified: 123,
+					user_can: {
+						edit: false,
+					},
 				},
-			} ],
-		} as ReturnType<typeof useRecentPosts> );
+			],
+		} as ReturnType< typeof useRecentPosts > );
 
 		render( <RecentlyEdited /> );
 

package/src/components/top-bar/chip-doc-type.tsx

@@ -1,6 +1,4 @@
-import {
-	PostTypeIcon,
-} from '@elementor/icons';
+import { PostTypeIcon } from '@elementor/icons';
 import { Chip } from '@elementor/ui';
 import * as React from 'react';
 import { getIconsMap } from '../../icons-map';

package/src/components/top-bar/create-post-list-item.tsx

@@ -8,7 +8,7 @@ import useUser from '../../hooks/use-user';
 
 type Props = MenuItemProps & {
 	closePopup: () => void;
-}
+};
 
 export function CreatePostListItem( { closePopup, ...props }: Props ) {
 	const { create, isLoading } = useCreatePage();

package/src/components/top-bar/indicator.tsx

@@ -3,36 +3,38 @@ import { Typography, Stack, Tooltip as BaseTooltip, TooltipProps } from '@elemen
 import { Document } from '@elementor/editor-documents';
 
 type Props = {
-	title: Document['title'],
-	status: Document['status']
-}
+	title: Document[ 'title' ];
+	status: Document[ 'status' ];
+};
 
 export default function Indicator( { title, status }: Props ) {
 	return (
 		<Tooltip title={ title }>
-			<Stack component="span"	 direction="row" alignItems="center" spacing={ 0.5 }>
+			<Stack component="span" direction="row" alignItems="center" spacing={ 0.5 }>
 				<Typography component="span" variant="body2" sx={ { maxWidth: '120px' } } noWrap>
 					{ title }
 				</Typography>
-				{ status.value !== 'publish' &&
+				{ status.value !== 'publish' && (
 					<Typography component="span" variant="body2" sx={ { fontStyle: 'italic' } }>
 						({ status.label })
 					</Typography>
-				}
+				) }
 			</Stack>
 		</Tooltip>
 	);
 }
 
 function Tooltip( props: TooltipProps ) {
-	return <BaseTooltip
-		PopperProps={ {
-			sx: {
-				'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {
-					mt: 2.7,
+	return (
+		<BaseTooltip
+			PopperProps={ {
+				sx: {
+					'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {
+						mt: 2.7,
+					},
 				},
-			},
-		} }
-		{ ...props }
-	/>;
+			} }
+			{ ...props }
+		/>
+	);
 }

package/src/components/top-bar/post-list-item.tsx

@@ -8,7 +8,7 @@ import { RecentPost } from '../../types';
 type Props = MenuItemProps & {
 	post: RecentPost;
 	closePopup: () => void;
-}
+};
 
 export function PostListItem( { post, closePopup, ...props }: Props ) {
 	const navigateToDocument = useNavigateToDocument();
@@ -28,11 +28,7 @@ export function PostListItem( { post, closePopup, ...props }: Props ) {
 				primaryTypographyProps={ { variant: 'body2', noWrap: true } }
 				primary={ postTitle }
 			/>
-			<DocTypeChip
-				postType={ post.type.post_type }
-				docType={ post.type.doc_type }
-				label={ post.type.label }
-			/>
+			<DocTypeChip postType={ post.type.post_type } docType={ post.type.doc_type } label={ post.type.label } />
 		</MenuItem>
 	);
 }

package/src/components/top-bar/recently-edited.tsx

@@ -11,7 +11,10 @@ import {
 	MenuItem,
 } from '@elementor/ui';
 import { ChevronDownIcon } from '@elementor/icons';
-import { __useActiveDocument as useActiveDocument, __useHostDocument as useHostDocument } from '@elementor/editor-documents';
+import {
+	__useActiveDocument as useActiveDocument,
+	__useHostDocument as useHostDocument,
+} from '@elementor/editor-documents';
 import Indicator from './indicator';
 import useRecentPosts from '../../hooks/use-recent-posts';
 import { __ } from '@wordpress/i18n';
@@ -24,9 +27,7 @@ import { ExtendedWindow } from '../../types';
 export default function RecentlyEdited() {
 	const activeDocument = useActiveDocument();
 	const hostDocument = useHostDocument();
-	const document = activeDocument && activeDocument.type.value !== 'kit'
-		? activeDocument
-		: hostDocument;
+	const document = activeDocument && activeDocument.type.value !== 'kit' ? activeDocument : hostDocument;
 
 	const { data } = useRecentPosts();
 
@@ -59,30 +60,23 @@ export default function RecentlyEdited() {
 				size="small"
 				endIcon={ <ChevronDownIcon fontSize="small" /> }
 				{ ...buttonProps }
-				onClick={ ( e: React.MouseEvent ) =>	{
+				onClick={ ( e: React.MouseEvent ) => {
 					const extendedWindow = window as unknown as ExtendedWindow;
 					const config = extendedWindow?.elementor?.editorEvents?.config;
 
 					if ( config ) {
-						extendedWindow.elementor.editorEvents.dispatchEvent(
-							config.names.topBar.documentNameDropdown,
-							{
-								location: config.locations.topBar,
-								secondaryLocation: config.secondaryLocations.documentNameDropdown,
-								trigger: config.triggers.dropdownClick,
-								element: config.elements.dropdown,
-							},
-						);
+						extendedWindow.elementor.editorEvents.dispatchEvent( config.names.topBar.documentNameDropdown, {
+							location: config.locations.topBar,
+							secondaryLocation: config.secondaryLocations.documentNameDropdown,
+							trigger: config.triggers.dropdownClick,
+							element: config.elements.dropdown,
+						} );
 					}
 
 					buttonProps.onClick( e );
 				} }
-
 			>
-				<Indicator
-					title={ documentTitle }
-					status={ document.status }
-				/>
+				<Indicator title={ documentTitle } status={ document.status } />
 			</Button>
 			<Menu
 				MenuListProps={ {

package/src/contexts/post-list-context.tsx

@@ -2,31 +2,35 @@ import * as React from 'react';
 import { useState, useContext, createContext, Dispatch, SetStateAction, ReactNode } from 'react';
 import { Slug } from '../api/post';
 
-export type EditMode = {
-	mode: 'rename',
-	details: {
-		postId: number,
-	},
-} | {
-	mode: 'create',
-	details: Record<string, never>,
-} | {
-	mode: 'duplicate',
-	details: {
-		postId: number,
-		title: string,
-	},
-} | {
-	mode: 'none',
-	details: Record<string, never>,
-};
+export type EditMode =
+	| {
+			mode: 'rename';
+			details: {
+				postId: number;
+			};
+	  }
+	| {
+			mode: 'create';
+			details: Record< string, never >;
+	  }
+	| {
+			mode: 'duplicate';
+			details: {
+				postId: number;
+				title: string;
+			};
+	  }
+	| {
+			mode: 'none';
+			details: Record< string, never >;
+	  };
 
 type ContextType = {
-	type: Slug,
-	editMode: EditMode,
-	setEditMode: Dispatch<SetStateAction<EditMode>>,
-	resetEditMode: () => void,
-	setError: () => void,
+	type: Slug;
+	editMode: EditMode;
+	setEditMode: Dispatch< SetStateAction< EditMode > >;
+	resetEditMode: () => void;
+	setError: () => void;
 };
 
 const defaultValues: ContextType = {
@@ -37,16 +41,16 @@ const defaultValues: ContextType = {
 	setError: () => null,
 };
 
-export const PostListContext = createContext<ContextType>( defaultValues );
+export const PostListContext = createContext< ContextType >( defaultValues );
 
 export const PostListContextProvider = ( {
 	type,
 	setError,
 	children,
 }: {
-	type: ContextType[ 'type' ],
-	setError: ContextType[ 'setError' ],
-	children: ReactNode,
+	type: ContextType[ 'type' ];
+	setError: ContextType[ 'setError' ];
+	children: ReactNode;
 } ) => {
 	const [ editMode, setEditMode ] = useState( defaultValues.editMode );
 
@@ -55,13 +59,15 @@ export const PostListContextProvider = ( {
 	};
 
 	return (
-		<PostListContext.Provider value={ {
-			type,
-			editMode,
-			setEditMode,
-			resetEditMode,
-			setError,
-		} }>
+		<PostListContext.Provider
+			value={ {
+				type,
+				editMode,
+				setEditMode,
+				resetEditMode,
+				setError,
+			} }
+		>
 			{ children }
 		</PostListContext.Provider>
 	);

package/src/env.ts

@@ -1,8 +1,8 @@
 import { parseEnv } from '@elementor/env';
 
-export const { env, validateEnv } = parseEnv<{
+export const { env, validateEnv } = parseEnv< {
 	is_pages_panel_active: boolean;
-}>( '@elementor/editor-site-navigation', ( envData ) => {
+} >( '@elementor/editor-site-navigation', ( envData ) => {
 	return envData as {
 		is_pages_panel_active: boolean;
 	};