@elementor/editor-site-navigation 0.22.5 → 0.22.7

package/src/api/post.ts

@@ -3,14 +3,14 @@ import { Post } from '../types';
 import { __ } from '@wordpress/i18n';
 
 export type NewPost = {
-	title: string,
-	status: 'publish' | 'draft'
+	title: string;
+	status: 'publish' | 'draft';
 };
 
 export type UpdatePost = {
-	id: number,
-	title?: string,
-}
+	id: number;
+	title?: string;
+};
 
 export type Slug = keyof typeof postTypesMap;
 
@@ -27,23 +27,23 @@ export const postTypesMap = {
 export const POST_PER_PAGE = 10;
 
 type WpPostsResponse = {
-	json: () => Promise<Post[]>,
+	json: () => Promise< Post[] >;
 	headers: {
-		get: ( key: string ) => string | null,
-	},
-}
+		get: ( key: string ) => string | null;
+	};
+};
 
 export type PostsResponse = {
-	data: Post[],
-	totalPages: number,
-	totalPosts: number,
-	currentPage: number,
+	data: Post[];
+	totalPages: number;
+	totalPosts: number;
+	currentPage: number;
 };
 
-export const getRequest = async ( postTypeSlug: Slug, page: number ): Promise<PostsResponse> => {
+export const getRequest = async ( postTypeSlug: Slug, page: number ): Promise< PostsResponse > => {
 	const baseUri = `/wp/v2/${ postTypesMap[ postTypeSlug ].rest_base }`;
 
-	const keys: Array<keyof Post> = [ 'id', 'type', 'title', 'link', 'status', 'user_can' ];
+	const keys: Array< keyof Post > = [ 'id', 'type', 'title', 'link', 'status', 'user_can' ];
 
 	const queryParams = new URLSearchParams( {
 		status: 'any',
@@ -55,7 +55,7 @@ export const getRequest = async ( postTypeSlug: Slug, page: number ): Promise<Po
 
 	const uri = baseUri + '?' + queryParams.toString();
 
-	const result = await apiFetch<WpPostsResponse>( { path: uri, parse: false } );
+	const result = await apiFetch< WpPostsResponse >( { path: uri, parse: false } );
 	const data = await result.json();
 
 	const totalPages = Number( result.headers.get( 'x-wp-totalpages' ) );
@@ -72,7 +72,7 @@ export const getRequest = async ( postTypeSlug: Slug, page: number ): Promise<Po
 export const createRequest = ( postTypeSlug: Slug, newPost: NewPost ) => {
 	const path = `/wp/v2/${ postTypesMap[ postTypeSlug ].rest_base }`;
 
-	return apiFetch<{ id: number }>( {
+	return apiFetch< { id: number } >( {
 		path,
 		method: 'POST',
 		data: newPost,
@@ -102,7 +102,7 @@ export const deleteRequest = ( postTypeSlug: Slug, postId: number ) => {
 export const duplicateRequest = ( originalPost: UpdatePost ) => {
 	const path = `/elementor/v1/site-navigation/duplicate-post`;
 
-	return apiFetch<{ post_id: number }>( {
+	return apiFetch< { post_id: number } >( {
 		path,
 		method: 'POST',
 		data: {

package/src/api/recent-posts.ts

@@ -11,5 +11,5 @@ export const getRequest = () => {
 
 	const path = `${ baseUrl }?${ queryParams.toString() }`;
 
-	return apiFetch<RecentPost[]>( { path } );
+	return apiFetch< RecentPost[] >( { path } );
 };

package/src/api/settings.ts

@@ -1,9 +1,9 @@
 import apiFetch from '@wordpress/api-fetch';
 
 export type Settings = {
-	show_on_front: 'page' | '',
-	page_on_front: number,
-}
+	show_on_front: 'page' | '';
+	page_on_front: number;
+};
 
 type Homepage = number;
 
@@ -12,7 +12,7 @@ export const getSettings = () => {
 
 	const uri = baseUri;
 
-	return apiFetch<Homepage>( { path: uri } );
+	return apiFetch< Homepage >( { path: uri } );
 };
 
 export const updateSettings = ( settings: Settings ) => {

package/src/api/user.ts

@@ -1,13 +1,13 @@
 import apiFetch from '@wordpress/api-fetch';
 
 export type User = {
-  capabilities: Record<string, boolean>,
-}
+	capabilities: Record< string, boolean >;
+};
 
 export const getUser = () => {
 	const baseUri = '/wp/v2/users/me';
 
-	const keys: Array<keyof User> = [ 'capabilities' ];
+	const keys: Array< keyof User > = [ 'capabilities' ];
 
 	const queryParams = new URLSearchParams( {
 		_fields: keys.join( ',' ),
@@ -16,5 +16,5 @@ export const getUser = () => {
 
 	const uri = baseUri + '?' + queryParams.toString();
 
-	return apiFetch<User>( { path: uri } );
+	return apiFetch< User >( { path: uri } );
 };

package/src/components/panel/actions-menu/action-menu-item.tsx

@@ -1,24 +1,21 @@
 import * as React from 'react';
-import {
-	ListItemIcon,
-	ListItemText,
-	MenuItem,
-	MenuItemProps as MenuItemPropsType,
-} from '@elementor/ui';
+import { ListItemIcon, ListItemText, MenuItem, MenuItemProps as MenuItemPropsType } from '@elementor/ui';
 import { ComponentType } from 'react';
 
 export type Props = {
 	title: string;
 	icon: ComponentType;
 	MenuItemProps: MenuItemPropsType;
-}
+};
 
 export default function ActionMenuItem( { title, icon: Icon, MenuItemProps }: Props ) {
 	return (
 		<MenuItem { ...MenuItemProps }>
-			<ListItemIcon sx={ {
-				color: 'inherit',
-			} }>
+			<ListItemIcon
+				sx={ {
+					color: 'inherit',
+				} }
+			>
 				<Icon />
 			</ListItemIcon>
 			<ListItemText primary={ title } />

package/src/components/panel/actions-menu/actions/__tests__/set-home.test.tsx

@@ -15,14 +15,17 @@ jest.mock( '../../../../../hooks/use-homepage-actions', () => ( {
 	} ) ),
 } ) );
 
-jest.mock( '../../../../../hooks/use-user', () => (
-	{
-		default: jest.fn( () => ( { isLoading: false, data: { capabilities: {
-			manage_options: true,
-		} } } ) ),
-		__esModule: true,
-	}
-) );
+jest.mock( '../../../../../hooks/use-user', () => ( {
+	default: jest.fn( () => ( {
+		isLoading: false,
+		data: {
+			capabilities: {
+				manage_options: true,
+			},
+		},
+	} ) ),
+	__esModule: true,
+} ) );
 
 describe( '@elementor/editor-site-navigation - SetHome', () => {
 	afterAll( () => {
@@ -92,7 +95,7 @@ describe( '@elementor/editor-site-navigation - SetHome', () => {
 					manage_options: false,
 				},
 			},
-		} as unknown as ReturnType<typeof useUser> );
+		} as unknown as ReturnType< typeof useUser > );
 
 		const post: Post = {
 			id: 1,

package/src/components/panel/actions-menu/actions/delete.tsx

@@ -25,32 +25,32 @@ export default function Delete( { post }: { post: Post } ) {
 	const isPostActive = activeDocument?.id === post.id;
 	const userCanDelete = post.user_can.delete;
 
-	const isDisabled = ( ! userCanDelete ) || post.isHome || isPostActive;
+	const isDisabled = ! userCanDelete || post.isHome || isPostActive;
 
 	return (
 		<>
 			<ActionMenuItem
 				title={ __( 'Delete', 'elementor' ) }
 				icon={ TrashIcon }
-				MenuItemProps={
-					{
-						disabled: isDisabled,
-						onClick: () => setIsDialogOpen( true ),
-						sx: { '&:hover': { color: 'error.main' } },
-					}
-				}
+				MenuItemProps={ {
+					disabled: isDisabled,
+					onClick: () => setIsDialogOpen( true ),
+					sx: { '&:hover': { color: 'error.main' } },
+				} }
 			/>
 
-			{
-				isDialogOpen && (
-					<DeleteDialog post={ post } setIsDialogOpen={ setIsDialogOpen } />
-				)
-			}
+			{ isDialogOpen && <DeleteDialog post={ post } setIsDialogOpen={ setIsDialogOpen } /> }
 		</>
 	);
 }
 
-function DeleteDialog( { post, setIsDialogOpen }: { post: Post, setIsDialogOpen: React.Dispatch<React.SetStateAction<boolean>> } ) {
+function DeleteDialog( {
+	post,
+	setIsDialogOpen,
+}: {
+	post: Post;
+	setIsDialogOpen: React.Dispatch< React.SetStateAction< boolean > >;
+} ) {
 	const { type } = usePostListContext();
 	const { deletePost } = usePostActions( type );
 	const { setError } = usePostListContext();
@@ -76,25 +76,27 @@ function DeleteDialog( { post, setIsDialogOpen }: { post: Post, setIsDialogOpen:
 	};
 
 	return (
-		<Dialog
-			open={ true }
-			onClose={ handleCancel }
-			aria-labelledby="delete-dialog"
-		>
-			<DialogTitle noWrap>
-				{ dialogTitle }
-			</DialogTitle>
+		<Dialog open={ true } onClose={ handleCancel } aria-labelledby="delete-dialog">
+			<DialogTitle noWrap>{ dialogTitle }</DialogTitle>
 			<Divider />
 			<DialogContent>
 				<DialogContentText>
-					{ __( 'The page and its content will be deleted forever and we won’t be able to recover them.', 'elementor' ) }
+					{ __(
+						'The page and its content will be deleted forever and we won’t be able to recover them.',
+						'elementor'
+					) }
 				</DialogContentText>
 			</DialogContent>
 			<DialogActions>
-				<Button variant="contained" color="secondary" onClick={ handleCancel } disabled={ deletePost.isPending }>
+				<Button
+					variant="contained"
+					color="secondary"
+					onClick={ handleCancel }
+					disabled={ deletePost.isPending }
+				>
 					{ __( 'Cancel', 'elementor' ) }
 				</Button>
-				<Button variant="contained" color="error" onClick={ deletePage } disabled={ deletePost.isPending } >
+				<Button variant="contained" color="error" onClick={ deletePage } disabled={ deletePost.isPending }>
 					{ ! deletePost.isPending ? __( 'Delete', 'elementor' ) : <CircularProgress /> }
 				</Button>
 			</DialogActions>

package/src/components/panel/actions-menu/actions/duplicate.tsx

@@ -7,7 +7,7 @@ import { usePostListContext } from '../../../../contexts/post-list-context';
 import { Post } from '../../../../types';
 import useUser from '../../../../hooks/use-user';
 
-export default function Duplicate( { post, popupState }: { post: Post, popupState: PopupState } ) {
+export default function Duplicate( { post, popupState }: { post: Post; popupState: PopupState } ) {
 	const { setEditMode } = usePostListContext();
 	const { data: user } = useUser();
 	const onClick = () => {
@@ -28,12 +28,10 @@ export default function Duplicate( { post, popupState }: { post: Post, popupStat
 		<ActionMenuItem
 			title={ __( 'Duplicate', 'elementor' ) }
 			icon={ CopyIcon }
-			MenuItemProps={
-				{
-					disabled: isDisabled,
-					onClick,
-				}
-			}
+			MenuItemProps={ {
+				disabled: isDisabled,
+				onClick,
+			} }
 		/>
 	);
 }

package/src/components/panel/actions-menu/actions/rename.tsx

@@ -12,19 +12,17 @@ export default function Rename( { post }: { post: Post } ) {
 		<ActionMenuItem
 			title={ __( 'Rename', 'elementor' ) }
 			icon={ EraseIcon }
-			MenuItemProps={
-				{
-					disabled: ! post.user_can.edit,
-					onClick: () => {
-						setEditMode( {
-							mode: 'rename',
-							details: {
-								postId: post.id,
-							},
-						} );
-					},
-				}
-			}
+			MenuItemProps={ {
+				disabled: ! post.user_can.edit,
+				onClick: () => {
+					setEditMode( {
+						mode: 'rename',
+						details: {
+							postId: post.id,
+						},
+					} );
+				},
+			} }
 		/>
 	);
 }

package/src/components/panel/actions-menu/actions/set-home.tsx

@@ -8,7 +8,7 @@ import { CircularProgress } from '@elementor/ui';
 import { usePostListContext } from '../../../../contexts/post-list-context';
 import useUser from '../../../../hooks/use-user';
 
-export default function SetHome( { post, closeMenu }: { post: Post, closeMenu: () => void } ) {
+export default function SetHome( { post, closeMenu }: { post: Post; closeMenu: () => void } ) {
 	const { updateSettingsMutation } = useHomepageActions();
 	const { setError } = usePostListContext();
 	const { data: user } = useUser();
@@ -27,18 +27,16 @@ export default function SetHome( { post, closeMenu }: { post: Post, closeMenu: (
 	const isPostPublished = post.status === 'publish';
 	const isPostHomepage = !! post.isHome;
 
-	const isDisabled = ( ! canManageOptions ) || isPostHomepage || ( ! isPostPublished ) || updateSettingsMutation.isPending;
+	const isDisabled = ! canManageOptions || isPostHomepage || ! isPostPublished || updateSettingsMutation.isPending;
 
 	return (
 		<ActionMenuItem
 			title={ __( 'Set as homepage', 'elementor' ) }
 			icon={ ! updateSettingsMutation.isPending ? HomeIcon : CircularProgress }
-			MenuItemProps={
-				{
-					disabled: isDisabled,
-					onClick: handleClick,
-				}
-			}
+			MenuItemProps={ {
+				disabled: isDisabled,
+				onClick: handleClick,
+			} }
 		/>
 	);
 }

package/src/components/panel/actions-menu/actions/view.tsx

@@ -16,11 +16,9 @@ export default function View( { post }: { post: Post } ) {
 		<ActionMenuItem
 			title={ title }
 			icon={ EyeIcon }
-			MenuItemProps={
-				{
-					onClick: () => window.open( post.link, '_blank' ),
-				}
-			}
+			MenuItemProps={ {
+				onClick: () => window.open( post.link, '_blank' ),
+			} }
 		/>
 	);
 }

package/src/components/panel/error-snackbar.tsx

@@ -21,10 +21,11 @@ const ErrorSnackbar = ( { open, onClose }: Props ) => {
 					component="span"
 					sx={ {
 						fontWeight: 'bold',
-					} }>
+					} }
+				>
 					We couldn’t complete the action.
-				</Typography>
-				{ ' ' }Please try again
+				</Typography>{ ' ' }
+				Please try again
 			</Alert>
 		</Snackbar>
 	);

package/src/components/panel/panel.ts

@@ -1,11 +1,7 @@
 import { __createPanel } from '@elementor/editor-panels';
 import Shell from './shell';
 
-export const {
-	panel,
-	usePanelStatus,
-	usePanelActions,
-} = __createPanel( {
+export const { panel, usePanelStatus, usePanelActions } = __createPanel( {
 	id: 'site-navigation-panel',
 	component: Shell,
 } );

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

@@ -26,8 +26,22 @@ jest.mock( '../../../../hooks/use-posts', () => ( {
 		isLoading: false,
 		data: {
 			posts: [
-				{ id: 1, type: 'page', title: { rendered: 'Home' }, status: 'publish', link: 'www.test.demo', user_can: { edit: true, delete: true } },
-				{ id: 2, type: 'page', title: { rendered: 'About' }, status: 'draft', link: 'www.test.demo', user_can: { edit: true, delete: true } },
+				{
+					id: 1,
+					type: 'page',
+					title: { rendered: 'Home' },
+					status: 'publish',
+					link: 'www.test.demo',
+					user_can: { edit: true, delete: true },
+				},
+				{
+					id: 2,
+					type: 'page',
+					title: { rendered: 'About' },
+					status: 'draft',
+					link: 'www.test.demo',
+					user_can: { edit: true, delete: true },
+				},
 			],
 			total: 2,
 		},
@@ -47,20 +61,25 @@ jest.mock( '@elementor/editor-documents', () => ( {
 	__useNavigateToDocument: jest.fn(),
 } ) );
 
-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/editor-site-navigation - PostsCollapsibleList', () => {
 	beforeEach( () => {
-		jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument( ( {
-			id: 3,
-		} ) ) );
+		jest.mocked( useActiveDocument ).mockReturnValue(
+			createMockDocument( {
+				id: 3,
+			} )
+		);
 	} );
 
 	afterEach( () => {
@@ -168,12 +187,26 @@ describe( '@elementor/editor-site-navigation - PostsCollapsibleList', () => {
 			isLoading: false,
 			data: {
 				posts: [
-					{ id: 1, type: 'page', title: { rendered: 'Home' }, status: 'publish', link: 'www.test.demo', user_can: { edit: true, delete: true } },
-					{ id: 2, type: 'page', title: { rendered: 'About' }, status: 'draft', link: 'www.test.demo', user_can: { edit: true, delete: true } },
+					{
+						id: 1,
+						type: 'page',
+						title: { rendered: 'Home' },
+						status: 'publish',
+						link: 'www.test.demo',
+						user_can: { edit: true, delete: true },
+					},
+					{
+						id: 2,
+						type: 'page',
+						title: { rendered: 'About' },
+						status: 'draft',
+						link: 'www.test.demo',
+						user_can: { edit: true, delete: true },
+					},
 				],
 				total: 2,
 			},
-		} as ReturnType<typeof usePosts> );
+		} as ReturnType< typeof usePosts > );
 		renderWithQuery( <PostsCollapsibleList isOpenByDefault={ true } /> );
 
 		// Assert.
@@ -187,12 +220,26 @@ describe( '@elementor/editor-site-navigation - PostsCollapsibleList', () => {
 			isLoading: false,
 			data: {
 				posts: [
-					{ id: 1, type: 'page', title: { rendered: 'Home' }, status: 'publish', link: 'www.test.demo', user_can: { edit: true, delete: true } },
-					{ id: 2, type: 'page', title: { rendered: 'About' }, status: 'draft', link: 'www.test.demo', user_can: { edit: true, delete: true } },
+					{
+						id: 1,
+						type: 'page',
+						title: { rendered: 'Home' },
+						status: 'publish',
+						link: 'www.test.demo',
+						user_can: { edit: true, delete: true },
+					},
+					{
+						id: 2,
+						type: 'page',
+						title: { rendered: 'About' },
+						status: 'draft',
+						link: 'www.test.demo',
+						user_can: { edit: true, delete: true },
+					},
 				],
 				total: 2,
 			},
-		} as ReturnType<typeof usePosts> );
+		} as ReturnType< typeof usePosts > );
 		renderWithQuery( <PostsCollapsibleList isOpenByDefault={ true } /> );
 
 		// Assert.

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

@@ -1,22 +1,32 @@
 import * as React from 'react';
 import { PropsWithChildren, useState } from 'react';
-import { Collapse, IconButton, List, ListItem, ListItemIcon, ListItemText, styled, SvgIconProps, Divider } from '@elementor/ui';
+import {
+	Collapse,
+	IconButton,
+	List,
+	ListItem,
+	ListItemIcon,
+	ListItemText,
+	styled,
+	SvgIconProps,
+	Divider,
+} from '@elementor/ui';
 import { ChevronDownIcon } from '@elementor/icons';
 
 type Props = {
-	label: string,
-	Icon: React.ForwardRefExoticComponent<Omit<SvgIconProps, 'ref'>>,
-	isOpenByDefault?: boolean,
-}
+	label: string;
+	Icon: React.ForwardRefExoticComponent< Omit< SvgIconProps, 'ref' > >;
+	isOpenByDefault?: boolean;
+};
 
 interface RotateIconProps extends SvgIconProps {
-	isOpen: boolean,
+	isOpen: boolean;
 }
 
 // TODO 21/06/2023 : Should replace this with future Rotate component that will be implemented in elementor-ui
 const RotateIcon = styled( ChevronDownIcon, {
 	shouldForwardProp: ( prop ) => prop !== 'isOpen',
-} )<RotateIconProps>( ( { theme, isOpen } ) => ( {
+} )< RotateIconProps >( ( { theme, isOpen } ) => ( {
 	transform: isOpen ? 'rotate(0deg)' : 'rotate(-90deg)',
 	transition: theme.transitions.create( 'transform', {
 		duration: theme.transitions.duration.standard,
@@ -25,24 +35,24 @@ const RotateIcon = styled( ChevronDownIcon, {
 
 const StyledListItemIcon = styled( ListItemIcon )( ( { theme } ) => ( {
 	minWidth: theme.spacing( 4 ),
-} )	);
+} ) );
 
-export default function CollapsibleList(
-	{
-		label,
-		Icon,
-		isOpenByDefault = false,
-		children,
-	}: PropsWithChildren<Props>
-) {
+export default function CollapsibleList( {
+	label,
+	Icon,
+	isOpenByDefault = false,
+	children,
+}: PropsWithChildren< Props > ) {
 	const [ isOpen, setIsOpen ] = useState( isOpenByDefault );
 
 	return (
 		<>
-			<ListItem >
-				<StyledListItemIcon sx={ {
-					color: 'text.secondary',
-				} } >
+			<ListItem>
+				<StyledListItemIcon
+					sx={ {
+						color: 'text.secondary',
+					} }
+				>
 					<IconButton
 						onClick={ () => setIsOpen( ( prev ) => ! prev ) }
 						size="small"
@@ -57,18 +67,17 @@ export default function CollapsibleList(
 					size="small"
 					sx={ {
 						color: 'inherit',
-					} }>
+					} }
+				>
 					<Icon fontSize="small" />
 				</StyledListItemIcon>
-				<ListItemText primaryTypographyProps={ { variant: 'subtitle2', component: 'span' } } primary={ label } />
+				<ListItemText
+					primaryTypographyProps={ { variant: 'subtitle2', component: 'span' } }
+					primary={ label }
+				/>
 			</ListItem>
-			<Collapse
-				in={ isOpen }
-				timeout="auto"
-				unmountOnExit>
-				<List dense>
-					{ children }
-				</List>
+			<Collapse in={ isOpen } timeout="auto" unmountOnExit>
+				<List dense>{ children }</List>
 			</Collapse>
 			<Divider sx={ { mt: 1 } } />
 		</>