@elementor/editor-site-navigation 0.18.1 → 0.18.3

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.18.3](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.18.2...@elementor/editor-site-navigation@0.18.3) (2023-08-20)
+
+
+### Bug Fixes
+
+* **editor-site-navigation:** noWrap for the post title [ED-11626] ([#102](https://github.com/elementor/elementor-packages/issues/102)) ([d4e1a54](https://github.com/elementor/elementor-packages/commit/d4e1a547cb9ff91c42eb7efe4ce8cfadb54a2922))
+
+
+
+
+
+## [0.18.2](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.18.1...@elementor/editor-site-navigation@0.18.2) (2023-08-16)
+
+**Note:** Version bump only for package @elementor/editor-site-navigation
+
+
+
+
+
 ## [0.18.1](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.18.0...@elementor/editor-site-navigation@0.18.1) (2023-08-02)
 
 **Note:** Version bump only for package @elementor/editor-site-navigation

package/README.md

@@ -1,7 +1,6 @@
 # Editor Site Navigation
 
-> **Warning**
-> 
+> [!WARNING]
 > This package is under development and not ready for production use.
 
 ## Code examples

package/dist/index.js

@@ -61,7 +61,7 @@ var import_editor_documents3 = require("@elementor/editor-documents");
 var React = __toESM(require("react"));
 var import_ui = require("@elementor/ui");
 function Indicator({ title, status }) {
-  return /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(import_ui.Stack, { direction: "row", alignItems: "center", spacing: 2 }, /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2", sx: { maxWidth: "120px" }, noWrap: true }, title), status.value !== "publish" && /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2", sx: { fontStyle: "italic" } }, "(", status.label, ")")));
+  return /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(import_ui.Stack, { component: "span", direction: "row", alignItems: "center", spacing: 2 }, /* @__PURE__ */ React.createElement(import_ui.Typography, { component: "span", variant: "body2", sx: { maxWidth: "120px" }, noWrap: true }, title), status.value !== "publish" && /* @__PURE__ */ React.createElement(import_ui.Typography, { component: "span", variant: "body2", sx: { fontStyle: "italic" } }, "(", status.label, ")")));
 }
 function Tooltip(props) {
   return /* @__PURE__ */ React.createElement(
@@ -125,12 +125,14 @@ function DocTypeChip({ postType, docType, label }) {
   return /* @__PURE__ */ React2.createElement(
     import_ui2.Chip,
     {
+      component: "span",
       size: "medium",
       variant: "standard",
       label,
+      "data-value": docType,
       color,
       icon: /* @__PURE__ */ React2.createElement(Icon, null),
-      sx: { ml: 3 }
+      sx: { ml: 3, cursor: "inherit" }
     }
   );
 }
@@ -153,13 +155,35 @@ function useReverseHtmlEntities(escapedHTML = "") {
 }
 
 // src/components/top-bar/post-list-item.tsx
-function PostListItem({ post, closePopup }) {
+function PostListItem({ post, closePopup, ...props }) {
   const navigateToDocument = (0, import_editor_documents.useNavigateToDocument)();
   const postTitle = useReverseHtmlEntities(post.title);
-  return /* @__PURE__ */ React3.createElement(import_ui3.MenuItem, { dense: true, sx: { width: "100%" }, onClick: () => {
-    closePopup();
-    navigateToDocument(post.id);
-  } }, postTitle, /* @__PURE__ */ React3.createElement(DocTypeChip, { postType: post.type.post_type, docType: post.type.doc_type, label: post.type.label }));
+  return /* @__PURE__ */ React3.createElement(
+    import_ui3.MenuItem,
+    {
+      onClick: async () => {
+        closePopup();
+        await navigateToDocument(post.id);
+      },
+      ...props
+    },
+    /* @__PURE__ */ React3.createElement(
+      import_ui3.ListItemText,
+      {
+        sx: { flexGrow: 0 },
+        primaryTypographyProps: { noWrap: true },
+        primary: postTitle
+      }
+    ),
+    /* @__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
@@ -192,14 +216,22 @@ async function addNewPage() {
 var import_icons3 = require("@elementor/icons");
 var import_i18n = require("@wordpress/i18n");
 var import_editor_documents2 = require("@elementor/editor-documents");
-function CreatePostListItem({ closePopup }) {
+function CreatePostListItem({ closePopup, ...props }) {
   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"));
+  return /* @__PURE__ */ React4.createElement(
+    import_ui4.MenuItem,
+    {
+      onClick: async () => {
+        const { id } = await create();
+        closePopup();
+        await navigateToDocument(id);
+      },
+      ...props
+    },
+    /* @__PURE__ */ React4.createElement(import_ui4.ListItemIcon, null, isLoading ? /* @__PURE__ */ React4.createElement(import_ui4.CircularProgress, null) : /* @__PURE__ */ React4.createElement(import_icons3.PlusIcon, null)),
+    /* @__PURE__ */ React4.createElement(import_ui4.ListItemText, { primary: (0, import_i18n.__)("Add new page", "elementor") })
+  );
 }
 
 // src/components/top-bar/recently-edited.tsx
@@ -216,7 +248,7 @@ function RecentlyEdited() {
   if (!document2) {
     return null;
   }
-  return /* @__PURE__ */ React5.createElement(import_ui5.Box, { sx: { cursor: "default" } }, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
     import_ui5.Button,
     {
       color: "inherit",
@@ -234,14 +266,25 @@ function RecentlyEdited() {
   ), /* @__PURE__ */ React5.createElement(
     import_ui5.Menu,
     {
-      MenuListProps: { component: "div" },
-      PaperProps: { sx: { mt: 4, minWidth: 314 } },
+      MenuListProps: {
+        dense: true,
+        subheader: /* @__PURE__ */ React5.createElement(import_ui5.ListSubheader, { sx: { fontStyle: "italic", fontWeight: "300" } }, (0, import_i18n2.__)("Recent", "elementor"))
+      },
+      PaperProps: { sx: { mt: 4, width: 320 } },
       ...(0, import_ui5.bindMenu)(popupState)
     },
-    /* @__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),
+    recentPosts.length === 0 && /* @__PURE__ */ React5.createElement(import_ui5.MenuItem, { disabled: true }, /* @__PURE__ */ React5.createElement(
+      import_ui5.ListItemText,
+      {
+        primaryTypographyProps: {
+          variant: "caption",
+          fontStyle: "italic"
+        },
+        primary: (0, import_i18n2.__)("There are no other pages or templates on this site yet.", "elementor")
+      }
+    )),
+    /* @__PURE__ */ React5.createElement(import_ui5.Divider, { disabled: recentPosts.length === 0 }),
     /* @__PURE__ */ React5.createElement(CreatePostListItem, { closePopup: popupState.close })
   ));
 }
@@ -656,7 +699,7 @@ function ActionMenuItem({ title, icon: Icon, ListItemButtonProps }) {
       ...ListItemButtonProps
     },
     /* @__PURE__ */ React13.createElement(import_ui9.ListItemIcon, null, /* @__PURE__ */ React13.createElement(Icon, null)),
-    /* @__PURE__ */ React13.createElement(import_ui9.ListItemText, null, title)
+    /* @__PURE__ */ React13.createElement(import_ui9.ListItemText, { primary: title })
   ));
 }
 

package/dist/index.mjs

@@ -29,10 +29,10 @@ import {
   bindTrigger,
   Menu,
   Button,
-  Box,
   ListSubheader,
-  Typography as Typography2,
-  Divider
+  Divider,
+  ListItemText as ListItemText3,
+  MenuItem as MenuItem3
 } from "@elementor/ui";
 import { ChevronDownIcon } from "@elementor/icons";
 import { useActiveDocument, useHostDocument } from "@elementor/editor-documents";
@@ -41,7 +41,7 @@ import { useActiveDocument, useHostDocument } from "@elementor/editor-documents"
 import * as React from "react";
 import { Typography, Stack, Tooltip as BaseTooltip } from "@elementor/ui";
 function Indicator({ title, status }) {
-  return /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(Stack, { direction: "row", alignItems: "center", spacing: 2 }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2", sx: { maxWidth: "120px" }, noWrap: true }, title), status.value !== "publish" && /* @__PURE__ */ React.createElement(Typography, { variant: "body2", sx: { fontStyle: "italic" } }, "(", status.label, ")")));
+  return /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(Stack, { component: "span", direction: "row", alignItems: "center", spacing: 2 }, /* @__PURE__ */ React.createElement(Typography, { component: "span", variant: "body2", sx: { maxWidth: "120px" }, noWrap: true }, title), status.value !== "publish" && /* @__PURE__ */ React.createElement(Typography, { component: "span", variant: "body2", sx: { fontStyle: "italic" } }, "(", status.label, ")")));
 }
 function Tooltip(props) {
   return /* @__PURE__ */ React.createElement(
@@ -107,18 +107,20 @@ function DocTypeChip({ postType, docType, label }) {
   return /* @__PURE__ */ React2.createElement(
     Chip,
     {
+      component: "span",
       size: "medium",
       variant: "standard",
       label,
+      "data-value": docType,
       color,
       icon: /* @__PURE__ */ React2.createElement(Icon, null),
-      sx: { ml: 3 }
+      sx: { ml: 3, cursor: "inherit" }
     }
   );
 }
 
 // src/components/top-bar/post-list-item.tsx
-import { MenuItem } from "@elementor/ui";
+import { MenuItem, ListItemText } from "@elementor/ui";
 import * as React3 from "react";
 import { useNavigateToDocument } from "@elementor/editor-documents";
 
@@ -135,17 +137,39 @@ function useReverseHtmlEntities(escapedHTML = "") {
 }
 
 // src/components/top-bar/post-list-item.tsx
-function PostListItem({ post, closePopup }) {
+function PostListItem({ post, closePopup, ...props }) {
   const navigateToDocument = useNavigateToDocument();
   const postTitle = useReverseHtmlEntities(post.title);
-  return /* @__PURE__ */ React3.createElement(MenuItem, { dense: true, sx: { width: "100%" }, onClick: () => {
-    closePopup();
-    navigateToDocument(post.id);
-  } }, postTitle, /* @__PURE__ */ React3.createElement(DocTypeChip, { postType: post.type.post_type, docType: post.type.doc_type, label: post.type.label }));
+  return /* @__PURE__ */ React3.createElement(
+    MenuItem,
+    {
+      onClick: async () => {
+        closePopup();
+        await navigateToDocument(post.id);
+      },
+      ...props
+    },
+    /* @__PURE__ */ React3.createElement(
+      ListItemText,
+      {
+        sx: { flexGrow: 0 },
+        primaryTypographyProps: { noWrap: true },
+        primary: postTitle
+      }
+    ),
+    /* @__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 { CircularProgress, ListItemIcon, ListItemText as ListItemText2, MenuItem as MenuItem2 } from "@elementor/ui";
 import * as React4 from "react";
 
 // src/hooks/use-create-page.ts
@@ -174,14 +198,22 @@ async function addNewPage() {
 import { PlusIcon } from "@elementor/icons";
 import { __ } from "@wordpress/i18n";
 import { useNavigateToDocument as useNavigateToDocument2 } from "@elementor/editor-documents";
-function CreatePostListItem({ closePopup }) {
+function CreatePostListItem({ closePopup, ...props }) {
   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"));
+  return /* @__PURE__ */ React4.createElement(
+    MenuItem2,
+    {
+      onClick: async () => {
+        const { id } = await create();
+        closePopup();
+        await navigateToDocument(id);
+      },
+      ...props
+    },
+    /* @__PURE__ */ React4.createElement(ListItemIcon, null, isLoading ? /* @__PURE__ */ React4.createElement(CircularProgress, null) : /* @__PURE__ */ React4.createElement(PlusIcon, null)),
+    /* @__PURE__ */ React4.createElement(ListItemText2, { primary: __("Add new page", "elementor") })
+  );
 }
 
 // src/components/top-bar/recently-edited.tsx
@@ -198,7 +230,7 @@ function RecentlyEdited() {
   if (!document2) {
     return null;
   }
-  return /* @__PURE__ */ React5.createElement(Box, { sx: { cursor: "default" } }, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
     Button,
     {
       color: "inherit",
@@ -216,14 +248,25 @@ function RecentlyEdited() {
   ), /* @__PURE__ */ React5.createElement(
     Menu,
     {
-      MenuListProps: { component: "div" },
-      PaperProps: { sx: { mt: 4, minWidth: 314 } },
+      MenuListProps: {
+        dense: true,
+        subheader: /* @__PURE__ */ React5.createElement(ListSubheader, { sx: { fontStyle: "italic", fontWeight: "300" } }, __2("Recent", "elementor"))
+      },
+      PaperProps: { sx: { mt: 4, width: 320 } },
       ...bindMenu(popupState)
     },
-    /* @__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),
+    recentPosts.length === 0 && /* @__PURE__ */ React5.createElement(MenuItem3, { disabled: true }, /* @__PURE__ */ React5.createElement(
+      ListItemText3,
+      {
+        primaryTypographyProps: {
+          variant: "caption",
+          fontStyle: "italic"
+        },
+        primary: __2("There are no other pages or templates on this site yet.", "elementor")
+      }
+    )),
+    /* @__PURE__ */ React5.createElement(Divider, { disabled: recentPosts.length === 0 }),
     /* @__PURE__ */ React5.createElement(CreatePostListItem, { closePopup: popupState.close })
   ));
 }
@@ -246,7 +289,7 @@ import { __ as __14 } from "@wordpress/i18n";
 // src/components/panel/posts-list/posts-collapsible-list.tsx
 import * as React22 from "react";
 import { PageTypeIcon as PageTypeIcon2 } from "@elementor/icons";
-import { Skeleton, Box as Box4, List as List2 } from "@elementor/ui";
+import { Skeleton, Box as Box3, List as List2 } from "@elementor/ui";
 
 // src/hooks/use-posts.ts
 import { useQuery } from "@elementor/query";
@@ -356,7 +399,7 @@ function usePostListContext() {
 // src/components/panel/posts-list/collapsible-list.tsx
 import * as React7 from "react";
 import { useState as useState4 } from "react";
-import { Collapse, IconButton, List, ListItem, ListItemIcon as ListItemIcon2, ListItemText, styled, Divider as Divider2 } from "@elementor/ui";
+import { Collapse, IconButton, List, ListItem, ListItemIcon as ListItemIcon2, ListItemText as ListItemText4, styled, Divider as Divider2 } from "@elementor/ui";
 import { ChevronDownIcon as ChevronDownIcon2 } from "@elementor/icons";
 var RotateIcon = styled(ChevronDownIcon2, {
   shouldForwardProp: (prop) => prop !== "isOpen"
@@ -381,7 +424,7 @@ function CollapsibleList({
       size: "small"
     },
     /* @__PURE__ */ React7.createElement(RotateIcon, { fontSize: "small", isOpen })
-  )), /* @__PURE__ */ React7.createElement(ListItemIcon2, null, /* @__PURE__ */ React7.createElement(Icon, null)), /* @__PURE__ */ React7.createElement(ListItemText, { primaryTypographyProps: { variant: "subtitle1", component: "span", sx: { fontWeight: "bold" } }, primary: label })), /* @__PURE__ */ React7.createElement(
+  )), /* @__PURE__ */ React7.createElement(ListItemIcon2, null, /* @__PURE__ */ React7.createElement(Icon, null)), /* @__PURE__ */ React7.createElement(ListItemText4, { primaryTypographyProps: { variant: "subtitle1", component: "span", sx: { fontWeight: "bold" } }, primary: label })), /* @__PURE__ */ React7.createElement(
     Collapse,
     {
       in: isOpen,
@@ -438,7 +481,7 @@ function useInvalidatePosts(postTypeSlug) {
 import * as React8 from "react";
 import { useState as useState5, useRef } from "react";
 import {
-  Box as Box2,
+  Box,
   ListItem as ListItem2,
   TextField,
   IconButton as IconButton2,
@@ -480,7 +523,7 @@ function EditModeTemplate({ postTitle, isLoading, callback }) {
       sx: { pt: 1, pl: 0 },
       secondaryAction: /* @__PURE__ */ React8.createElement(CloseButton, { isLoading, closeButton })
     },
-    /* @__PURE__ */ React8.createElement(Box2, { width: "100%", sx: { ml: 4, pr: 3 }, component: "form", onSubmit: onFormSubmit }, /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React8.createElement(Box, { width: "100%", sx: { ml: 4, pr: 3 }, component: "form", onSubmit: onFormSubmit }, /* @__PURE__ */ React8.createElement(
       TextField,
       {
         autoFocus: true,
@@ -589,7 +632,7 @@ import {
   ListItem as ListItem3,
   ListItemButton as ListItemButton2,
   ListItemIcon as ListItemIcon4,
-  ListItemText as ListItemText3,
+  ListItemText as ListItemText6,
   Menu as Menu2,
   ToggleButton,
   usePopupState as usePopupState2
@@ -599,13 +642,13 @@ import { useActiveDocument as useActiveDocument3, useNavigateToDocument as useNa
 
 // src/components/shared/page-title-and-status.tsx
 import * as React12 from "react";
-import { Box as Box3, Typography as Typography3 } from "@elementor/ui";
+import { Box as Box2, Typography as Typography2 } from "@elementor/ui";
 var PageStatus = ({ status }) => {
   if ("publish" === status) {
     return null;
   }
   return /* @__PURE__ */ React12.createElement(
-    Typography3,
+    Typography2,
     {
       component: "span",
       variant: "body2",
@@ -624,7 +667,7 @@ var PageStatus = ({ status }) => {
 var PageTitle = ({ title }) => {
   const modifiedTitle = useReverseHtmlEntities(title);
   return /* @__PURE__ */ React12.createElement(
-    Typography3,
+    Typography2,
     {
       component: "span",
       variant: "body2",
@@ -637,7 +680,7 @@ var PageTitle = ({ title }) => {
   );
 };
 function PageTitleAndStatus({ page }) {
-  return /* @__PURE__ */ React12.createElement(Box3, { display: "flex" }, /* @__PURE__ */ React12.createElement(PageTitle, { title: page.title.rendered }), "\xA0", /* @__PURE__ */ React12.createElement(PageStatus, { status: page.status }));
+  return /* @__PURE__ */ React12.createElement(Box2, { display: "flex" }, /* @__PURE__ */ React12.createElement(PageTitle, { title: page.title.rendered }), "\xA0", /* @__PURE__ */ React12.createElement(PageStatus, { status: page.status }));
 }
 
 // src/components/panel/actions-menu/actions/rename.tsx
@@ -650,17 +693,17 @@ import * as React13 from "react";
 import {
   ListItemButton,
   ListItemIcon as ListItemIcon3,
-  ListItemText as ListItemText2,
-  MenuItem as MenuItem3
+  ListItemText as ListItemText5,
+  MenuItem as MenuItem4
 } from "@elementor/ui";
 function ActionMenuItem({ title, icon: Icon, ListItemButtonProps }) {
-  return /* @__PURE__ */ React13.createElement(MenuItem3, { disableGutters: true }, /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React13.createElement(MenuItem4, { disableGutters: true }, /* @__PURE__ */ React13.createElement(
     ListItemButton,
     {
       ...ListItemButtonProps
     },
     /* @__PURE__ */ React13.createElement(ListItemIcon3, null, /* @__PURE__ */ React13.createElement(Icon, null)),
-    /* @__PURE__ */ React13.createElement(ListItemText2, null, title)
+    /* @__PURE__ */ React13.createElement(ListItemText5, { primary: title })
   ));
 }
 
@@ -909,7 +952,7 @@ function ListItemView({ post }) {
       },
       /* @__PURE__ */ React19.createElement(ListItemIcon4, null),
       /* @__PURE__ */ React19.createElement(
-        ListItemText3,
+        ListItemText6,
         {
           disableTypography: true
         },
@@ -978,21 +1021,21 @@ function PostsCollapsibleList({ isOpenByDefault = false }) {
   const { data: posts, isLoading: postsLoading } = usePosts(type);
   const { data: homepageSettings } = useHomepage();
   if (!posts || postsLoading) {
-    return /* @__PURE__ */ React22.createElement(Box4, { sx: { px: 5 } }, /* @__PURE__ */ React22.createElement(
-      Box4,
+    return /* @__PURE__ */ React22.createElement(Box3, { sx: { px: 5 } }, /* @__PURE__ */ React22.createElement(
+      Box3,
       {
         display: "flex",
         justifyContent: "flex-end",
         alignItems: "center"
       },
       /* @__PURE__ */ React22.createElement(Skeleton, { sx: { my: 4 }, animation: "wave", variant: "rounded", width: "110px", height: "28px" })
-    ), /* @__PURE__ */ React22.createElement(Box4, null, /* @__PURE__ */ React22.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "100%", height: "24px" }), /* @__PURE__ */ React22.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" }), /* @__PURE__ */ React22.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" }), /* @__PURE__ */ React22.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" })));
+    ), /* @__PURE__ */ React22.createElement(Box3, null, /* @__PURE__ */ React22.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "100%", height: "24px" }), /* @__PURE__ */ React22.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" }), /* @__PURE__ */ React22.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" }), /* @__PURE__ */ React22.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" })));
   }
   const label = `${postTypesMap[type].labels.plural_name} (${posts.length.toString()})`;
   const isHomepageSet = homepageSettings?.show_on_front === "page" && !!homepageSettings?.page_on_front;
   const homepageId = isHomepageSet ? homepageSettings.page_on_front : null;
   return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(
-    Box4,
+    Box3,
     {
       display: "flex",
       justifyContent: "flex-end",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/editor-site-navigation",
-	"version": "0.18.1",
+	"version": "0.18.3",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -32,7 +32,7 @@
 		"dev": "tsup --config=../../tsup.dev.ts"
 	},
 	"dependencies": {
-		"@elementor/editor-app-bar": "^0.7.1",
+		"@elementor/editor-app-bar": "^0.7.2",
 		"@elementor/editor-documents": "^0.8.3",
 		"@elementor/editor-panels": "^0.2.1",
 		"@elementor/env": "^0.2.0",
@@ -49,5 +49,5 @@
 	"elementor": {
 		"type": "extension"
 	},
-	"gitHead": "43abed846a5beaf6b0c6c5a8420c81a5bea33152"
+	"gitHead": "363ef377d04515fd96976149cb33e36bc0864351"
 }

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

@@ -23,9 +23,7 @@ export default function ActionMenuItem( { title, icon: Icon, ListItemButtonProps
 				<ListItemIcon>
 					<Icon />
 				</ListItemIcon>
-				<ListItemText>
-					{ title }
-				</ListItemText>
+				<ListItemText primary={ title } />
 			</ListItemButton>
 		</MenuItem>
 	);

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

@@ -19,12 +19,14 @@ export default function DocTypeChip( { postType, docType, label }: Props ) {
 
 	return (
 		<Chip
+			component="span"
 			size="medium"
 			variant="standard"
 			label={ label }
+			data-value={ docType }
 			color={ color }
 			icon={ <Icon /> }
-			sx={ { ml: 3 } }
+			sx={ { ml: 3, cursor: 'inherit' } }
 		/>
 	);
 }

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

@@ -1,26 +1,32 @@
-import { CircularProgress, ListItemIcon, MenuItem } from '@elementor/ui';
+import { CircularProgress, ListItemIcon, ListItemText, MenuItem, MenuItemProps } 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 } ) {
+type Props = MenuItemProps & {
+	closePopup: () => void;
+}
+
+export function CreatePostListItem( { closePopup, ...props }: Props ) {
 	const { create, isLoading } = useCreatePage();
 	const navigateToDocument = useNavigateToDocument();
 
 	return (
-		<MenuItem dense size="small" color="inherit" component="div" onClick={ async () => {
-			const { id } = await create();
+		<MenuItem
+			onClick={ async () => {
+				const { id } = await create();
 
-			closePopup();
-			navigateToDocument( id );
-		} }>
+				closePopup();
+				await navigateToDocument( id );
+			} }
+			{ ...props }
+		>
 			<ListItemIcon>
 				{ isLoading ? <CircularProgress /> : <PlusIcon /> }
 			</ListItemIcon>
-
-			{ __( 'Add new page', 'elementor' ) }
+			<ListItemText primary={ __( 'Add new page', 'elementor' ) } />
 		</MenuItem>
 	);
 }

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

@@ -10,12 +10,12 @@ type Props = {
 export default function Indicator( { title, status }: Props ) {
 	return (
 		<Tooltip title={ title }>
-			<Stack direction="row" alignItems="center" spacing={ 2 }>
-				<Typography variant="body2" sx={ { maxWidth: '120px' } } noWrap>
+			<Stack component="span"	 direction="row" alignItems="center" spacing={ 2 }>
+				<Typography component="span" variant="body2" sx={ { maxWidth: '120px' } } noWrap>
 					{ title }
 				</Typography>
 				{ status.value !== 'publish' &&
-					<Typography variant="body2" sx={ { fontStyle: 'italic' } }>
+					<Typography component="span" variant="body2" sx={ { fontStyle: 'italic' } }>
 						({ status.label })
 					</Typography>
 				}

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

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

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

@@ -5,10 +5,10 @@ import {
 	bindTrigger,
 	Menu,
 	Button,
-	Box,
 	ListSubheader,
-	Typography,
 	Divider,
+	ListItemText,
+	MenuItem,
 } from '@elementor/ui';
 import { ChevronDownIcon } from '@elementor/icons';
 import { useActiveDocument, useHostDocument } from '@elementor/editor-documents';
@@ -40,7 +40,7 @@ export default function RecentlyEdited() {
 	}
 
 	return (
-		<Box sx={ { cursor: 'default' } }>
+		<>
 			<Button
 				color="inherit"
 				size="small"
@@ -52,30 +52,39 @@ export default function RecentlyEdited() {
 					status={ document.status }
 				/>
 			</Button>
-
 			<Menu
-				MenuListProps={ { component: 'div' } }
-				PaperProps={ { sx: { mt: 4, minWidth: 314 } } }
+				MenuListProps={ {
+					dense: true,
+					subheader: (
+						<ListSubheader sx={ { fontStyle: 'italic', fontWeight: '300' } }>
+							{ __( 'Recent', 'elementor' ) }
+						</ListSubheader>
+					),
+				} }
+				PaperProps={ { sx: { mt: 4, width: 320 } } }
 				{ ...bindMenu( popupState ) }
 			>
-				<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>
+					<MenuItem disabled>
+						<ListItemText
+							primaryTypographyProps={ {
+								variant: 'caption',
+								fontStyle: 'italic',
+							} }
+							primary={ __( 'There are no other pages or templates on this site yet.', 'elementor' ) }
+						/>
+					</MenuItem>
 				) }
 
-				<Divider />
+				{ /* It appears that there might be a bug in Material UI. When the divider is the first active element, it attempts to receive focus instead of the item below it. */ }
+				<Divider disabled={ recentPosts.length === 0 } />
 
 				<CreatePostListItem closePopup={ popupState.close } />
 			</Menu>
-		</Box>
+		</>
 	);
 }