@elementor/editor-site-navigation 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.4.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.3.0...@elementor/editor-site-navigation@0.4.0) (2023-05-21)
+
+
+### Features
+
+* **editor-site-navigation:** change post without refresh [ED-10713] ([#39](https://github.com/elementor/elementor-packages/issues/39)) ([b72e82f](https://github.com/elementor/elementor-packages/commit/b72e82f9adb9c1237300cbf603f33f268f9f0400))
+* **locations:** change api to support props for slots [ED-10730] ([#38](https://github.com/elementor/elementor-packages/issues/38)) ([44bec3c](https://github.com/elementor/elementor-packages/commit/44bec3cda1020037ba7105c6f05ce4baa8e3b376))
+
+
+
+
+
 # 0.3.0 (2023-05-16)
 
 

package/dist/index.js

@@ -52,10 +52,10 @@ function getIconsMap() {
 }
 
 // src/components/top-bar/recently-edited.tsx
-var React4 = __toESM(require("react"));
-var import_ui4 = require("@elementor/ui");
+var React5 = __toESM(require("react"));
+var import_ui5 = require("@elementor/ui");
 var import_icons4 = require("@elementor/icons");
-var import_editor_documents = require("@elementor/editor-documents");
+var import_editor_documents3 = require("@elementor/editor-documents");
 
 // src/components/top-bar/indicator.tsx
 var React = __toESM(require("react"));
@@ -79,10 +79,40 @@ function Tooltip(props) {
   );
 }
 
-// src/components/top-bar/posts-list.tsx
-var import_ui3 = require("@elementor/ui");
-var React3 = __toESM(require("react"));
-var import_i18n = require("@wordpress/i18n");
+// src/hooks/use-recent-posts.ts
+var import_react = require("react");
+var import_api_fetch = __toESM(require("@wordpress/api-fetch"));
+var import_url = require("@wordpress/url");
+var endpointPath = "/elementor/v1/site-navigation/recent-posts";
+function useRecentPosts(documentId) {
+  const [recentPosts, setRecentPosts] = (0, import_react.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (documentId) {
+      setIsLoading(true);
+      fetchRecentlyEditedPosts(documentId).then((posts) => {
+        setRecentPosts(posts);
+        setIsLoading(false);
+      });
+    }
+  }, [documentId]);
+  return {
+    isLoading,
+    recentPosts
+  };
+}
+async function fetchRecentlyEditedPosts(documentId) {
+  const queryParams = {
+    posts_per_page: 5,
+    post__not_in: documentId
+  };
+  return await (0, import_api_fetch.default)({
+    path: (0, import_url.addQueryArgs)(endpointPath, queryParams)
+  }).then((response) => response).catch(() => []);
+}
+
+// src/components/top-bar/recently-edited.tsx
+var import_i18n2 = require("@wordpress/i18n");
 
 // src/components/top-bar/chip-doc-type.tsx
 var import_icons2 = require("@elementor/icons");
@@ -104,132 +134,98 @@ function DocTypeChip({ postType, docType, label }) {
   );
 }
 
+// src/components/top-bar/post-list-item.tsx
+var import_ui3 = require("@elementor/ui");
+var React3 = __toESM(require("react"));
+var import_editor_documents = require("@elementor/editor-documents");
+function PostListItem({ post, closePopup }) {
+  const navigateToDocument = (0, import_editor_documents.useNavigateToDocument)();
+  return /* @__PURE__ */ React3.createElement(import_ui3.MenuItem, { dense: true, sx: { width: "100%" }, onClick: () => {
+    closePopup();
+    navigateToDocument(post.id);
+  } }, post.title, /* @__PURE__ */ React3.createElement(DocTypeChip, { postType: post.type.post_type, docType: post.type.doc_type, label: post.type.label }));
+}
+
+// src/components/top-bar/create-post-list-item.tsx
+var import_ui4 = require("@elementor/ui");
+var React4 = __toESM(require("react"));
+
 // src/hooks/use-create-page.ts
-var import_api_fetch = __toESM(require("@wordpress/api-fetch"));
-var import_react = require("react");
-var endpointPath = "/elementor/v1/site-navigation/add-new-post";
-function useCreatePage({ onCreated: onCreated2 }) {
-  const [isLoading, setIsLoading] = (0, import_react.useState)(false);
+var import_api_fetch2 = __toESM(require("@wordpress/api-fetch"));
+var import_react2 = require("react");
+var endpointPath2 = "/elementor/v1/site-navigation/add-new-post";
+function useCreatePage() {
+  const [isLoading, setIsLoading] = (0, import_react2.useState)(false);
   return {
     create: () => {
       setIsLoading(true);
-      addNewPage().then((newPost) => newPost).then((newPost) => {
-        setIsLoading(false);
-        onCreated2(newPost.edit_url);
-      }).catch(() => {
-        setIsLoading(false);
-      });
+      return addNewPage().then((newPost) => newPost).finally(() => setIsLoading(false));
     },
     isLoading
   };
 }
 async function addNewPage() {
-  return await (0, import_api_fetch.default)({
-    path: endpointPath,
+  return await (0, import_api_fetch2.default)({
+    path: endpointPath2,
     method: "POST",
     data: { post_type: "page" }
   });
 }
 
-// src/components/top-bar/posts-list.tsx
+// src/components/top-bar/create-post-list-item.tsx
 var import_icons3 = require("@elementor/icons");
-function PostsList({ recentPosts }) {
-  const { create, isLoading } = useCreatePage({ onCreated });
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(import_ui3.ListSubheader, { sx: { fontSize: 12, fontStyle: "italic", pl: 4 }, component: "div", id: "nested-list-subheader" }, (0, import_i18n.__)("Recent", "elementor")), recentPosts.length ? recentPosts.map(({ title, edit_url: editUrl, type, id }) => /* @__PURE__ */ React3.createElement(
-    import_ui3.MenuItem,
-    {
-      dense: true,
-      key: id,
-      component: "a",
-      href: editUrl
-    },
-    title,
-    /* @__PURE__ */ React3.createElement(DocTypeChip, { postType: type.post_type, docType: type.doc_type, label: type.label })
-  )) : /* @__PURE__ */ React3.createElement(import_ui3.Typography, { variant: "caption", sx: { color: "grey.500", fontStyle: "italic", p: 4 }, component: "div", "aria-label": void 0 }, (0, import_i18n.__)("There are no other pages or templates on this site yet.", "elementor")), /* @__PURE__ */ React3.createElement(import_ui3.Divider, null), /* @__PURE__ */ React3.createElement(
-    import_ui3.MenuItem,
-    {
-      dense: true,
-      size: "small",
-      color: "inherit",
-      component: "div",
-      onClick: create
-    },
-    /* @__PURE__ */ React3.createElement(import_ui3.ListItemIcon, null, isLoading ? /* @__PURE__ */ React3.createElement(import_ui3.CircularProgress, null) : /* @__PURE__ */ React3.createElement(import_icons3.PlusIcon, null)),
-    (0, import_i18n.__)("Add new page", "elementor")
-  ));
-}
-function onCreated(url) {
-  window.location.href = url;
-}
-
-// src/hooks/use-recent-posts.ts
-var import_react2 = require("react");
-var import_api_fetch2 = __toESM(require("@wordpress/api-fetch"));
-var import_url = require("@wordpress/url");
-var endpointPath2 = "/elementor/v1/site-navigation/recent-posts";
-function useRecentPosts(documentId) {
-  const [recentPosts, setRecentPosts] = (0, import_react2.useState)([]);
-  const [isLoading, setIsLoading] = (0, import_react2.useState)(false);
-  (0, import_react2.useEffect)(() => {
-    if (documentId) {
-      setIsLoading(true);
-      fetchRecentlyEditedPosts(documentId).then((posts) => {
-        setRecentPosts(posts);
-        setIsLoading(false);
-      });
-    }
-  }, [documentId]);
-  return {
-    isLoading,
-    recentPosts
-  };
-}
-async function fetchRecentlyEditedPosts(documentId) {
-  const queryParams = {
-    posts_per_page: 5,
-    post__not_in: documentId
-  };
-  return await (0, import_api_fetch2.default)({
-    path: (0, import_url.addQueryArgs)(endpointPath2, queryParams)
-  }).then((response) => response).catch(() => []);
+var import_i18n = require("@wordpress/i18n");
+var import_editor_documents2 = require("@elementor/editor-documents");
+function CreatePostListItem({ closePopup }) {
+  const { create, isLoading } = useCreatePage();
+  const navigateToDocument = (0, import_editor_documents2.useNavigateToDocument)();
+  return /* @__PURE__ */ React4.createElement(import_ui4.MenuItem, { dense: true, size: "small", color: "inherit", component: "div", onClick: async () => {
+    const { id } = await create();
+    closePopup();
+    navigateToDocument(id);
+  } }, /* @__PURE__ */ React4.createElement(import_ui4.ListItemIcon, null, isLoading ? /* @__PURE__ */ React4.createElement(import_ui4.CircularProgress, null) : /* @__PURE__ */ React4.createElement(import_icons3.PlusIcon, null)), (0, import_i18n.__)("Add new page", "elementor"));
 }
 
 // src/components/top-bar/recently-edited.tsx
 function RecentlyEdited() {
-  const activeDocument = (0, import_editor_documents.useActiveDocument)();
-  const hostDocument = (0, import_editor_documents.useHostDocument)();
+  const activeDocument = (0, import_editor_documents3.useActiveDocument)();
+  const hostDocument = (0, import_editor_documents3.useHostDocument)();
   const document = activeDocument && activeDocument.type.value !== "kit" ? activeDocument : hostDocument;
   const { recentPosts } = useRecentPosts(document?.id);
-  const popupState = (0, import_ui4.usePopupState)({
+  const popupState = (0, import_ui5.usePopupState)({
     variant: "popover",
     popupId: "elementor-v2-top-bar-recently-edited"
   });
   if (!document) {
     return null;
   }
-  return /* @__PURE__ */ React4.createElement(import_ui4.Box, { sx: { cursor: "default" } }, /* @__PURE__ */ React4.createElement(
-    import_ui4.Button,
+  return /* @__PURE__ */ React5.createElement(import_ui5.Box, { sx: { cursor: "default" } }, /* @__PURE__ */ React5.createElement(
+    import_ui5.Button,
     {
       color: "inherit",
       size: "small",
-      endIcon: /* @__PURE__ */ React4.createElement(import_icons4.ChevronDownIcon, { fontSize: "small" }),
-      ...(0, import_ui4.bindTrigger)(popupState)
+      endIcon: /* @__PURE__ */ React5.createElement(import_icons4.ChevronDownIcon, { fontSize: "small" }),
+      ...(0, import_ui5.bindTrigger)(popupState)
     },
-    /* @__PURE__ */ React4.createElement(
+    /* @__PURE__ */ React5.createElement(
       Indicator,
       {
         title: document.title,
         status: document.status
       }
     )
-  ), /* @__PURE__ */ React4.createElement(
-    import_ui4.Menu,
+  ), /* @__PURE__ */ React5.createElement(
+    import_ui5.Menu,
     {
       MenuListProps: { component: "div" },
       PaperProps: { sx: { mt: 4, minWidth: 314 } },
-      ...(0, import_ui4.bindMenu)(popupState)
+      ...(0, import_ui5.bindMenu)(popupState)
     },
-    /* @__PURE__ */ React4.createElement(PostsList, { recentPosts })
+    /* @__PURE__ */ React5.createElement(import_ui5.ListSubheader, { sx: { fontSize: 12, fontStyle: "italic", pl: 4 }, component: "div", id: "nested-list-subheader" }, (0, import_i18n2.__)("Recent", "elementor")),
+    recentPosts.map((post) => /* @__PURE__ */ React5.createElement(PostListItem, { key: post.id, post, closePopup: popupState.close })),
+    recentPosts.length === 0 && /* @__PURE__ */ React5.createElement(import_ui5.Typography, { variant: "caption", sx: { color: "grey.500", fontStyle: "italic", p: 4 }, component: "div", "aria-label": void 0 }, (0, import_i18n2.__)("There are no other pages or templates on this site yet.", "elementor")),
+    /* @__PURE__ */ React5.createElement(import_ui5.Divider, null),
+    /* @__PURE__ */ React5.createElement(CreatePostListItem, { closePopup: popupState.close })
   ));
 }
 
@@ -240,7 +236,7 @@ function init() {
 }
 function registerTopBarMenuItems() {
   (0, import_editor_app_bar.injectIntoPageIndication)({
-    name: "document-recently-edited",
+    id: "document-recently-edited",
     filler: RecentlyEdited
   });
 }

package/dist/index.mjs

@@ -22,14 +22,17 @@ function getIconsMap() {
 }
 
 // src/components/top-bar/recently-edited.tsx
-import * as React4 from "react";
+import * as React5 from "react";
 import {
   bindMenu,
   usePopupState,
   bindTrigger,
   Menu,
   Button,
-  Box
+  Box,
+  ListSubheader,
+  Typography as Typography2,
+  Divider
 } from "@elementor/ui";
 import { ChevronDownIcon } from "@elementor/icons";
 import { useActiveDocument, useHostDocument } from "@elementor/editor-documents";
@@ -56,17 +59,40 @@ function Tooltip(props) {
   );
 }
 
-// src/components/top-bar/posts-list.tsx
-import {
-  Divider,
-  MenuItem,
-  ListItemIcon,
-  ListSubheader,
-  Typography as Typography2,
-  CircularProgress
-} from "@elementor/ui";
-import * as React3 from "react";
-import { __ } from "@wordpress/i18n";
+// src/hooks/use-recent-posts.ts
+import { useEffect, useState } from "react";
+import apiFetch from "@wordpress/api-fetch";
+import { addQueryArgs } from "@wordpress/url";
+var endpointPath = "/elementor/v1/site-navigation/recent-posts";
+function useRecentPosts(documentId) {
+  const [recentPosts, setRecentPosts] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  useEffect(() => {
+    if (documentId) {
+      setIsLoading(true);
+      fetchRecentlyEditedPosts(documentId).then((posts) => {
+        setRecentPosts(posts);
+        setIsLoading(false);
+      });
+    }
+  }, [documentId]);
+  return {
+    isLoading,
+    recentPosts
+  };
+}
+async function fetchRecentlyEditedPosts(documentId) {
+  const queryParams = {
+    posts_per_page: 5,
+    post__not_in: documentId
+  };
+  return await apiFetch({
+    path: addQueryArgs(endpointPath, queryParams)
+  }).then((response) => response).catch(() => []);
+}
+
+// src/components/top-bar/recently-edited.tsx
+import { __ as __2 } from "@wordpress/i18n";
 
 // src/components/top-bar/chip-doc-type.tsx
 import {
@@ -90,94 +116,56 @@ function DocTypeChip({ postType, docType, label }) {
   );
 }
 
+// src/components/top-bar/post-list-item.tsx
+import { MenuItem } from "@elementor/ui";
+import * as React3 from "react";
+import { useNavigateToDocument } from "@elementor/editor-documents";
+function PostListItem({ post, closePopup }) {
+  const navigateToDocument = useNavigateToDocument();
+  return /* @__PURE__ */ React3.createElement(MenuItem, { dense: true, sx: { width: "100%" }, onClick: () => {
+    closePopup();
+    navigateToDocument(post.id);
+  } }, post.title, /* @__PURE__ */ React3.createElement(DocTypeChip, { postType: post.type.post_type, docType: post.type.doc_type, label: post.type.label }));
+}
+
+// src/components/top-bar/create-post-list-item.tsx
+import { CircularProgress, ListItemIcon, MenuItem as MenuItem2 } from "@elementor/ui";
+import * as React4 from "react";
+
 // src/hooks/use-create-page.ts
-import apiFetch from "@wordpress/api-fetch";
-import { useState } from "react";
-var endpointPath = "/elementor/v1/site-navigation/add-new-post";
-function useCreatePage({ onCreated: onCreated2 }) {
-  const [isLoading, setIsLoading] = useState(false);
+import apiFetch2 from "@wordpress/api-fetch";
+import { useState as useState2 } from "react";
+var endpointPath2 = "/elementor/v1/site-navigation/add-new-post";
+function useCreatePage() {
+  const [isLoading, setIsLoading] = useState2(false);
   return {
     create: () => {
       setIsLoading(true);
-      addNewPage().then((newPost) => newPost).then((newPost) => {
-        setIsLoading(false);
-        onCreated2(newPost.edit_url);
-      }).catch(() => {
-        setIsLoading(false);
-      });
+      return addNewPage().then((newPost) => newPost).finally(() => setIsLoading(false));
     },
     isLoading
   };
 }
 async function addNewPage() {
-  return await apiFetch({
-    path: endpointPath,
+  return await apiFetch2({
+    path: endpointPath2,
     method: "POST",
     data: { post_type: "page" }
   });
 }
 
-// src/components/top-bar/posts-list.tsx
+// src/components/top-bar/create-post-list-item.tsx
 import { PlusIcon } from "@elementor/icons";
-function PostsList({ recentPosts }) {
-  const { create, isLoading } = useCreatePage({ onCreated });
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(ListSubheader, { sx: { fontSize: 12, fontStyle: "italic", pl: 4 }, component: "div", id: "nested-list-subheader" }, __("Recent", "elementor")), recentPosts.length ? recentPosts.map(({ title, edit_url: editUrl, type, id }) => /* @__PURE__ */ React3.createElement(
-    MenuItem,
-    {
-      dense: true,
-      key: id,
-      component: "a",
-      href: editUrl
-    },
-    title,
-    /* @__PURE__ */ React3.createElement(DocTypeChip, { postType: type.post_type, docType: type.doc_type, label: type.label })
-  )) : /* @__PURE__ */ React3.createElement(Typography2, { variant: "caption", sx: { color: "grey.500", fontStyle: "italic", p: 4 }, component: "div", "aria-label": void 0 }, __("There are no other pages or templates on this site yet.", "elementor")), /* @__PURE__ */ React3.createElement(Divider, null), /* @__PURE__ */ React3.createElement(
-    MenuItem,
-    {
-      dense: true,
-      size: "small",
-      color: "inherit",
-      component: "div",
-      onClick: create
-    },
-    /* @__PURE__ */ React3.createElement(ListItemIcon, null, isLoading ? /* @__PURE__ */ React3.createElement(CircularProgress, null) : /* @__PURE__ */ React3.createElement(PlusIcon, null)),
-    __("Add new page", "elementor")
-  ));
-}
-function onCreated(url) {
-  window.location.href = url;
-}
-
-// src/hooks/use-recent-posts.ts
-import { useEffect, useState as useState2 } from "react";
-import apiFetch2 from "@wordpress/api-fetch";
-import { addQueryArgs } from "@wordpress/url";
-var endpointPath2 = "/elementor/v1/site-navigation/recent-posts";
-function useRecentPosts(documentId) {
-  const [recentPosts, setRecentPosts] = useState2([]);
-  const [isLoading, setIsLoading] = useState2(false);
-  useEffect(() => {
-    if (documentId) {
-      setIsLoading(true);
-      fetchRecentlyEditedPosts(documentId).then((posts) => {
-        setRecentPosts(posts);
-        setIsLoading(false);
-      });
-    }
-  }, [documentId]);
-  return {
-    isLoading,
-    recentPosts
-  };
-}
-async function fetchRecentlyEditedPosts(documentId) {
-  const queryParams = {
-    posts_per_page: 5,
-    post__not_in: documentId
-  };
-  return await apiFetch2({
-    path: addQueryArgs(endpointPath2, queryParams)
-  }).then((response) => response).catch(() => []);
+import { __ } from "@wordpress/i18n";
+import { useNavigateToDocument as useNavigateToDocument2 } from "@elementor/editor-documents";
+function CreatePostListItem({ closePopup }) {
+  const { create, isLoading } = useCreatePage();
+  const navigateToDocument = useNavigateToDocument2();
+  return /* @__PURE__ */ React4.createElement(MenuItem2, { dense: true, size: "small", color: "inherit", component: "div", onClick: async () => {
+    const { id } = await create();
+    closePopup();
+    navigateToDocument(id);
+  } }, /* @__PURE__ */ React4.createElement(ListItemIcon, null, isLoading ? /* @__PURE__ */ React4.createElement(CircularProgress, null) : /* @__PURE__ */ React4.createElement(PlusIcon, null)), __("Add new page", "elementor"));
 }
 
 // src/components/top-bar/recently-edited.tsx
@@ -193,29 +181,33 @@ function RecentlyEdited() {
   if (!document) {
     return null;
   }
-  return /* @__PURE__ */ React4.createElement(Box, { sx: { cursor: "default" } }, /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(Box, { sx: { cursor: "default" } }, /* @__PURE__ */ React5.createElement(
     Button,
     {
       color: "inherit",
       size: "small",
-      endIcon: /* @__PURE__ */ React4.createElement(ChevronDownIcon, { fontSize: "small" }),
+      endIcon: /* @__PURE__ */ React5.createElement(ChevronDownIcon, { fontSize: "small" }),
       ...bindTrigger(popupState)
     },
-    /* @__PURE__ */ React4.createElement(
+    /* @__PURE__ */ React5.createElement(
       Indicator,
       {
         title: document.title,
         status: document.status
       }
     )
-  ), /* @__PURE__ */ React4.createElement(
+  ), /* @__PURE__ */ React5.createElement(
     Menu,
     {
       MenuListProps: { component: "div" },
       PaperProps: { sx: { mt: 4, minWidth: 314 } },
       ...bindMenu(popupState)
     },
-    /* @__PURE__ */ React4.createElement(PostsList, { recentPosts })
+    /* @__PURE__ */ React5.createElement(ListSubheader, { sx: { fontSize: 12, fontStyle: "italic", pl: 4 }, component: "div", id: "nested-list-subheader" }, __2("Recent", "elementor")),
+    recentPosts.map((post) => /* @__PURE__ */ React5.createElement(PostListItem, { key: post.id, post, closePopup: popupState.close })),
+    recentPosts.length === 0 && /* @__PURE__ */ React5.createElement(Typography2, { variant: "caption", sx: { color: "grey.500", fontStyle: "italic", p: 4 }, component: "div", "aria-label": void 0 }, __2("There are no other pages or templates on this site yet.", "elementor")),
+    /* @__PURE__ */ React5.createElement(Divider, null),
+    /* @__PURE__ */ React5.createElement(CreatePostListItem, { closePopup: popupState.close })
   ));
 }
 
@@ -226,7 +218,7 @@ function init() {
 }
 function registerTopBarMenuItems() {
   injectIntoPageIndication({
-    name: "document-recently-edited",
+    id: "document-recently-edited",
     filler: RecentlyEdited
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/editor-site-navigation",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -32,8 +32,8 @@
 		"dev": "tsup src/index.ts --format esm --clean"
 	},
 	"dependencies": {
-		"@elementor/editor-app-bar": "^0.3.0",
-		"@elementor/editor-documents": "^0.3.0",
+		"@elementor/editor-app-bar": "^0.4.0",
+		"@elementor/editor-documents": "^0.4.0",
 		"@elementor/icons": "^0.2.1",
 		"@elementor/ui": "^1.4.50",
 		"@wordpress/api-fetch": "^6.27.0",
@@ -46,5 +46,5 @@
 	"elementor": {
 		"type": "extension"
 	},
-	"gitHead": "ccd6099031737d52202ba98812e21d16fac4bef2"
+	"gitHead": "45afd449fda346eea0f8a431ebca7d6c1d518dd1"
 }

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
-import { useHostDocument, useActiveDocument } from '@elementor/editor-documents';
+import { render, waitFor } from '@testing-library/react';
+import { useHostDocument, useActiveDocument, useNavigateToDocument } from '@elementor/editor-documents';
 import RecentlyEdited from '../recently-edited';
 import { createMockDocument } from 'test-utils';
 import useRecentPosts, { Post } from '../../../hooks/use-recent-posts';
@@ -9,6 +9,7 @@ import useCreatePage from '../../../hooks/use-create-page';
 jest.mock( '@elementor/editor-documents', () => ( {
 	useActiveDocument: jest.fn(),
 	useHostDocument: jest.fn(),
+	useNavigateToDocument: jest.fn(),
 } ) );
 
 jest.mock( '../../../hooks/use-recent-posts', () => (
@@ -55,16 +56,18 @@ describe( '@elementor/recently-edited - Top bar add new page', () => {
 		expect( label ).toBeInTheDocument();
 	} );
 
-	it( 'should trigger create page hook on click', () => {
+	it( 'should trigger create page hook on click', async () => {
 		// Arrange.
 		mockActiveDocument();
 
 		const isLoading = false;
 		const recentPosts: Post[] = [];
-		const create = jest.fn();
+		const create = jest.fn().mockReturnValue( Promise.resolve( { id: 123 } ) );
+		const navigateToDocument = jest.fn();
 
 		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, recentPosts } );
 		jest.mocked( useCreatePage ).mockReturnValue( { isLoading, create } );
+		jest.mocked( useNavigateToDocument ).mockReturnValue( navigateToDocument );
 
 		const { getByText, getAllByRole } = render( <RecentlyEdited /> );
 
@@ -76,7 +79,12 @@ describe( '@elementor/recently-edited - Top bar add new page', () => {
 		addNewPage.click();
 
 		// Assert.
-		expect( create ).toHaveBeenCalledTimes( 1 );
+		await waitFor( () => {
+			expect( create ).toHaveBeenCalledTimes( 1 );
+
+			expect( navigateToDocument ).toHaveBeenCalledTimes( 1 );
+			expect( navigateToDocument ).toHaveBeenCalledWith( 123 );
+		} );
 	} );
 } );
 

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { useHostDocument, useActiveDocument } from '@elementor/editor-documents';
+import { useHostDocument, useActiveDocument, useNavigateToDocument } from '@elementor/editor-documents';
 import RecentlyEdited from '../recently-edited';
 import { createMockDocument } from 'test-utils';
 import useRecentPosts, { Post } from '../../../hooks/use-recent-posts';
@@ -8,6 +8,7 @@ import useRecentPosts, { Post } from '../../../hooks/use-recent-posts';
 jest.mock( '@elementor/editor-documents', () => ( {
 	useActiveDocument: jest.fn(),
 	useHostDocument: jest.fn(),
+	useNavigateToDocument: jest.fn(),
 } ) );
 
 jest.mock( '../../../hooks/use-recent-posts', () => (
@@ -175,4 +176,38 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 
 		expect( getByText( 'Test post' ) ).toBeInTheDocument();
 	} );
+
+	it( 'should navigate to document on click', () => {
+		// Arrange.
+		const navigateToDocument = jest.fn();
+
+		jest.mocked( useNavigateToDocument ).mockReturnValue( navigateToDocument );
+
+		jest.mocked( useRecentPosts ).mockReturnValue( {
+			isLoading: false,
+			recentPosts: [ {
+				id: 123,
+				title: 'Test post',
+				edit_url: 'some_url',
+				type: {
+					post_type: 'post',
+					doc_type: 'wp-post',
+					label: 'Post',
+				},
+				date_modified: 123,
+			} ],
+		} );
+
+		const { getByText, getByRole } = render( <RecentlyEdited /> );
+
+		// Open the posts list.
+		getByRole( 'button' ).click();
+
+		// Act.
+		getByText( 'Test post' ).click();
+
+		// Assert.
+		expect( navigateToDocument ).toHaveBeenCalledTimes( 1 );
+		expect( navigateToDocument ).toHaveBeenCalledWith( 123 );
+	} );
 } );

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

@@ -0,0 +1,26 @@
+import { CircularProgress, ListItemIcon, MenuItem } from '@elementor/ui';
+import * as React from 'react';
+import useCreatePage from '../../hooks/use-create-page';
+import { PlusIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+import { useNavigateToDocument } from '@elementor/editor-documents';
+
+export function CreatePostListItem( { closePopup }: { closePopup: () => void } ) {
+	const { create, isLoading } = useCreatePage();
+	const navigateToDocument = useNavigateToDocument();
+
+	return (
+		<MenuItem dense size="small" color="inherit" component="div" onClick={ async () => {
+			const { id } = await create();
+
+			closePopup();
+			navigateToDocument( id );
+		} }>
+			<ListItemIcon>
+				{ isLoading ? <CircularProgress /> : <PlusIcon /> }
+			</ListItemIcon>
+
+			{ __( 'Add new page', 'elementor' ) }
+		</MenuItem>
+	);
+}

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

@@ -0,0 +1,24 @@
+import DocTypeChip from './chip-doc-type';
+import { MenuItem, MenuItemProps } from '@elementor/ui';
+import * as React from 'react';
+import { Post } from '../../hooks/use-recent-posts';
+import { useNavigateToDocument } from '@elementor/editor-documents';
+
+type Props = MenuItemProps & {
+	post: Post;
+	closePopup: () => void;
+}
+
+export function PostListItem( { post, closePopup }: Props ) {
+	const navigateToDocument = useNavigateToDocument();
+
+	return (
+		<MenuItem dense sx={ { width: '100%' } } onClick={ () => {
+			closePopup();
+			navigateToDocument( post.id );
+		} }>
+			{ post.title }
+			<DocTypeChip postType={ post.type.post_type } docType={ post.type.doc_type } label={ post.type.label } />
+		</MenuItem>
+	);
+}

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

@@ -6,12 +6,17 @@ import {
 	Menu,
 	Button,
 	Box,
+	ListSubheader,
+	Typography,
+	Divider,
 } from '@elementor/ui';
 import { ChevronDownIcon } from '@elementor/icons';
 import { useActiveDocument, useHostDocument } from '@elementor/editor-documents';
 import Indicator from './indicator';
-import PostsList from './posts-list';
 import useRecentPosts from '../../hooks/use-recent-posts';
+import { __ } from '@wordpress/i18n';
+import { PostListItem } from './post-list-item';
+import { CreatePostListItem } from './create-post-list-item';
 
 export default function RecentlyEdited() {
 	const activeDocument = useActiveDocument();
@@ -50,7 +55,23 @@ export default function RecentlyEdited() {
 				PaperProps={ { sx: { mt: 4, minWidth: 314 } } }
 				{ ...bindMenu( popupState ) }
 			>
-				<PostsList recentPosts={ recentPosts } />
+				<ListSubheader sx={ { fontSize: 12, fontStyle: 'italic', pl: 4 } } component="div" id="nested-list-subheader">
+					{ __( 'Recent', 'elementor' ) }
+				</ListSubheader>
+
+				{ recentPosts.map( ( post ) => (
+					<PostListItem key={ post.id } post={ post } closePopup={ popupState.close } />
+				) ) }
+
+				{ recentPosts.length === 0 && (
+					<Typography variant="caption" sx={ { color: 'grey.500', fontStyle: 'italic', p: 4 } } component="div" aria-label={ undefined }>
+						{ __( 'There are no other pages or templates on this site yet.', 'elementor' ) }
+					</Typography>
+				) }
+
+				<Divider />
+
+				<CreatePostListItem closePopup={ popupState.close } />
 			</Menu>
 		</Box>
 	);

package/src/hooks/__tests__/use-create-page.test.ts

@@ -17,8 +17,7 @@ describe( '@elementor/recently-edited/use-page', () => {
 
 	it( 'should run useCreatePage hook', async () => {
 		// Arrange.
-		const onCreated = jest.fn();
-		const { result } = renderHook( () => useCreatePage( { onCreated } ) );
+		const { result } = renderHook( useCreatePage );
 		const newPost = {
 			id: 1,
 			edit_url: 'editurl.com',

package/src/hooks/use-create-page.ts

@@ -6,28 +6,18 @@ export interface NewPost {
 	edit_url: string,
 }
 
-export type Args = {
-	onCreated: ( url : string ) => void;
-}
-
 export const endpointPath = '/elementor/v1/site-navigation/add-new-post';
 
-export default function useCreatePage( { onCreated }: Args ) {
+export default function useCreatePage() {
 	const [ isLoading, setIsLoading ] = useState( false );
 
 	return {
 		create: () => {
 			setIsLoading( true );
 
-			addNewPage()
+			return addNewPage()
 				.then( ( newPost ) => newPost as NewPost )
-				.then( ( newPost ) => {
-					setIsLoading( false );
-					onCreated( newPost.edit_url );
-				} )
-				.catch( () => {
-					setIsLoading( false );
-				} );
+				.finally( () => setIsLoading( false ) );
 		},
 		isLoading,
 	};

package/src/init.ts

@@ -7,7 +7,7 @@ export default function init() {
 
 function registerTopBarMenuItems() {
 	injectIntoPageIndication( {
-		name: 'document-recently-edited',
+		id: 'document-recently-edited',
 		filler: RecentlyEdited,
 	} );
 }

package/src/components/top-bar/posts-list.tsx

@@ -1,67 +0,0 @@
-import {
-	Divider,
-	MenuItem,
-	ListItemIcon,
-	ListSubheader,
-	Typography,
-	CircularProgress,
-} from '@elementor/ui';
-
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import DocTypeChip, { Props } from './chip-doc-type';
-import { Post } from '../../hooks/use-recent-posts';
-import useCreatePage from '../../hooks/use-create-page';
-import { PlusIcon } from '@elementor/icons';
-
-export type RecentPostsProps = {
-	recentPosts: Post[];
-};
-
-export default function PostsList( { recentPosts }: RecentPostsProps ) {
-	const { create, isLoading } = useCreatePage( { onCreated } );
-
-	return (
-		<>
-			<ListSubheader sx={ { fontSize: 12, fontStyle: 'italic', pl: 4 } } component="div" id="nested-list-subheader">
-				{ __( 'Recent', 'elementor' ) }
-			</ListSubheader>
-
-			{ recentPosts.length
-				? ( recentPosts.map( ( { title, edit_url: editUrl, type, id } ) => (
-					<MenuItem
-						dense
-						key={ id }
-						component="a"
-						href={ editUrl }
-					>
-						{ title }
-						<DocTypeChip postType={ type.post_type } docType={ type.doc_type as Props['docType'] } label={ type.label } />
-					</MenuItem>
-				) ) ) : (
-					<Typography variant="caption" sx={ { color: 'grey.500', fontStyle: 'italic', p: 4 } } component="div" aria-label={ undefined }>
-						{ __( 'There are no other pages or templates on this site yet.', 'elementor' ) }
-					</Typography>
-				)
-			}
-			<Divider />
-			<MenuItem
-				dense
-				size="small"
-				color="inherit"
-				component="div"
-				onClick={ create }
-			>
-				<ListItemIcon>
-					{ isLoading ? <CircularProgress /> : <PlusIcon /> }
-				</ListItemIcon>
-
-				{ __( 'Add new page', 'elementor' ) }
-			</MenuItem>
-		</>
-	);
-}
-
-function onCreated( url: string ) {
-	window.location.href = url;
-}