@elementor/editor-site-navigation 0.14.0 → 0.16.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.16.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.15.0...@elementor/editor-site-navigation@0.16.0) (2023-07-30)
+
+
+### Features
+
+* **site-navigation:** add delete action to pages panel [ED-10868] ([#94](https://github.com/elementor/elementor-packages/issues/94)) ([96447ff](https://github.com/elementor/elementor-packages/commit/96447ff3dede4681b10d904ee1ad9e82ef677392))
+
+
+
+
+
+# [0.15.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.14.0...@elementor/editor-site-navigation@0.15.0) (2023-07-30)
+
+
+### Features
+
+* **site-navigation:** add duplicate action to pages panel - fix [ED-10867] ([#96](https://github.com/elementor/elementor-packages/issues/96)) ([a1ece1b](https://github.com/elementor/elementor-packages/commit/a1ece1bf08657e8bc905cad59e3f9f65064b2f9a))
+
+
+
+
+
 # [0.14.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.13.0...@elementor/editor-site-navigation@0.14.0) (2023-07-27)
 
 

package/dist/index.js

@@ -257,13 +257,13 @@ var import_icons15 = require("@elementor/icons");
 var import_editor_panels2 = require("@elementor/editor-panels");
 
 // src/components/panel/shell.tsx
-var React24 = __toESM(require("react"));
+var React23 = __toESM(require("react"));
 var import_ui14 = require("@elementor/ui");
 var import_editor_panels = require("@elementor/editor-panels");
 var import_i18n13 = require("@wordpress/i18n");
 
 // src/components/panel/posts-list/posts-collapsible-list.tsx
-var React22 = __toESM(require("react"));
+var React21 = __toESM(require("react"));
 var import_icons13 = require("@elementor/icons");
 var import_ui12 = require("@elementor/ui");
 
@@ -412,7 +412,7 @@ function CollapsibleList({
 }
 
 // src/components/panel/posts-list/post-list-item.tsx
-var React21 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 
 // src/components/panel/posts-list/list-items/list-item-rename.tsx
 var React9 = __toESM(require("react"));
@@ -566,7 +566,7 @@ function ListItemCreate() {
 // src/components/panel/posts-list/list-items/list-item-duplicate.tsx
 var React11 = __toESM(require("react"));
 var import_i18n6 = require("@wordpress/i18n");
-function ListItemDuplicate({ post }) {
+function ListItemDuplicate() {
   const { type, editMode, resetEditMode } = usePostListContext();
   const { duplicatePost } = usePostActions(type);
   if ("duplicate" !== editMode.mode) {
@@ -574,7 +574,7 @@ function ListItemDuplicate({ post }) {
   }
   const duplicatePostCallback = (inputValue) => {
     duplicatePost.mutateAsync({
-      id: post.id,
+      id: editMode.details.postId,
       title: inputValue
     }, {
       onSuccess: () => {
@@ -586,7 +586,7 @@ function ListItemDuplicate({ post }) {
 }
 
 // src/components/panel/posts-list/list-items/list-item-view.tsx
-var React20 = __toESM(require("react"));
+var React19 = __toESM(require("react"));
 var import_ui11 = require("@elementor/ui");
 var import_icons12 = require("@elementor/icons");
 var import_editor_documents5 = require("@elementor/editor-documents");
@@ -635,129 +635,158 @@ function PageTitleAndStatus({ page }) {
 }
 
 // src/components/panel/actions-menu/actions/rename.tsx
-var React15 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 var import_icons7 = require("@elementor/icons");
 var import_i18n7 = require("@wordpress/i18n");
 
 // src/components/panel/actions-menu/action-menu-item.tsx
-var React14 = __toESM(require("react"));
-
-// src/components/panel/actions-menu/action-list-item.tsx
 var React13 = __toESM(require("react"));
 var import_ui9 = require("@elementor/ui");
-function ActionListItem({ title, icon: Icon, disabled, onClick }) {
-  return /* @__PURE__ */ React13.createElement(
+function ActionMenuItem({ title, icon: Icon, ListItemButtonProps }) {
+  return /* @__PURE__ */ React13.createElement(import_ui9.MenuItem, { disableGutters: true }, /* @__PURE__ */ React13.createElement(
     import_ui9.ListItemButton,
     {
-      disabled,
-      onClick
+      ...ListItemButtonProps
     },
     /* @__PURE__ */ React13.createElement(import_ui9.ListItemIcon, null, /* @__PURE__ */ React13.createElement(Icon, null)),
     /* @__PURE__ */ React13.createElement(import_ui9.ListItemText, null, title)
-  );
-}
-
-// src/components/panel/actions-menu/action-menu-item.tsx
-var import_ui10 = require("@elementor/ui");
-function ActionMenuItem(props) {
-  return /* @__PURE__ */ React14.createElement(import_ui10.MenuItem, { disableGutters: true }, /* @__PURE__ */ React14.createElement(ActionListItem, { ...props }));
+  ));
 }
 
 // src/components/panel/actions-menu/actions/rename.tsx
 function Rename({ post }) {
   const { setEditMode } = usePostListContext();
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React14.createElement(
     ActionMenuItem,
     {
       title: (0, import_i18n7.__)("Rename", "elementor"),
       icon: import_icons7.EraseIcon,
-      onClick: () => {
-        setEditMode({
-          mode: "rename",
-          details: {
-            postId: post.id
-          }
-        });
+      ListItemButtonProps: {
+        onClick: () => {
+          setEditMode({
+            mode: "rename",
+            details: {
+              postId: post.id
+            }
+          });
+        }
       }
     }
   );
 }
 
 // src/components/panel/actions-menu/actions/duplicate.tsx
-var React16 = __toESM(require("react"));
+var React15 = __toESM(require("react"));
 var import_icons8 = require("@elementor/icons");
 var import_i18n8 = require("@wordpress/i18n");
 function Duplicate({ post, popupState }) {
   const { setEditMode } = usePostListContext();
-  return /* @__PURE__ */ React16.createElement(
+  const onClick = () => {
+    popupState.close();
+    setEditMode({
+      mode: "duplicate",
+      details: {
+        postId: post.id,
+        title: post.title.rendered
+      }
+    });
+  };
+  return /* @__PURE__ */ React15.createElement(
     ActionMenuItem,
     {
       title: (0, import_i18n8.__)("Duplicate", "elementor"),
       icon: import_icons8.CopyIcon,
-      onClick: () => {
-        popupState.close();
-        setEditMode({
-          mode: "duplicate",
-          details: {
-            postId: post.id,
-            title: post.title.rendered
-          }
-        });
+      ListItemButtonProps: {
+        onClick
       }
     }
   );
 }
 
 // src/components/panel/actions-menu/actions/delete.tsx
-var React17 = __toESM(require("react"));
+var React16 = __toESM(require("react"));
 var import_icons9 = require("@elementor/icons");
-var import_editor_documents4 = require("@elementor/editor-documents");
 var import_i18n9 = require("@wordpress/i18n");
+var import_ui10 = require("@elementor/ui");
+var import_react7 = require("react");
+var import_editor_documents4 = require("@elementor/editor-documents");
 function Delete({ post }) {
+  const [isDialogOpen, setIsDialogOpen] = (0, import_react7.useState)(false);
   const activeDocument = (0, import_editor_documents4.useActiveDocument)();
-  const isActive = activeDocument?.id === post.id;
-  return /* @__PURE__ */ React17.createElement(
+  const isPostActive = activeDocument?.id === post.id;
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
     ActionMenuItem,
     {
       title: (0, import_i18n9.__)("Delete", "elementor"),
       icon: import_icons9.TrashIcon,
-      disabled: post.isHome || isActive,
-      onClick: () => null
+      ListItemButtonProps: {
+        disabled: post.isHome || isPostActive,
+        onClick: () => setIsDialogOpen(true),
+        sx: { "&:hover": { color: "error.main" } }
+      }
+    }
+  ), isDialogOpen && /* @__PURE__ */ React16.createElement(DeleteDialog, { post, setIsDialogOpen }));
+}
+function DeleteDialog({ post, setIsDialogOpen }) {
+  const { type } = usePostListContext();
+  const { deletePost } = usePostActions(type);
+  const dialogTitle = (0, import_i18n9.sprintf)((0, import_i18n9.__)("Delete \u201C%s\u201D?", "elementor"), post.title.rendered);
+  const deletePage = async () => {
+    await deletePost.mutateAsync(post.id);
+  };
+  const handleCancel = () => {
+    if (deletePost.isLoading) {
+      return;
     }
+    setIsDialogOpen(false);
+  };
+  return /* @__PURE__ */ React16.createElement(
+    import_ui10.Dialog,
+    {
+      open: true,
+      onClose: handleCancel,
+      "aria-labelledby": "delete-dialog"
+    },
+    /* @__PURE__ */ React16.createElement(import_ui10.DialogTitle, null, dialogTitle),
+    /* @__PURE__ */ React16.createElement(import_ui10.Divider, null),
+    /* @__PURE__ */ React16.createElement(import_ui10.DialogContent, null, /* @__PURE__ */ React16.createElement(import_ui10.DialogContentText, null, (0, import_i18n9.__)("The page and its content will be deleted forever and we won\u2019t be able to recover them.", "elementor"))),
+    /* @__PURE__ */ React16.createElement(import_ui10.DialogActions, null, /* @__PURE__ */ React16.createElement(import_ui10.Button, { variant: "contained", color: "secondary", onClick: handleCancel, disabled: deletePost.isLoading }, (0, import_i18n9.__)("Cancel", "elementor")), /* @__PURE__ */ React16.createElement(import_ui10.Button, { variant: "contained", color: "error", onClick: deletePage, disabled: deletePost.isLoading }, !deletePost.isLoading ? (0, import_i18n9.__)("Delete", "elementor") : /* @__PURE__ */ React16.createElement(import_ui10.CircularProgress, null)))
   );
 }
 
 // src/components/panel/actions-menu/actions/view.tsx
-var React18 = __toESM(require("react"));
+var React17 = __toESM(require("react"));
 var import_icons10 = require("@elementor/icons");
 var import_i18n10 = require("@wordpress/i18n");
 function View({ post }) {
   const { type } = usePostListContext();
   const title = (0, import_i18n10.__)("View %s", "elementor").replace("%s", postTypesMap[type].labels.singular_name);
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React17.createElement(
     ActionMenuItem,
     {
       title,
       icon: import_icons10.EyeIcon,
-      onClick: () => {
-        window.open(post.link, "_blank");
+      ListItemButtonProps: {
+        onClick: () => window.open(post.link, "_blank")
       }
     }
   );
 }
 
 // src/components/panel/actions-menu/actions/set-home.tsx
-var React19 = __toESM(require("react"));
+var React18 = __toESM(require("react"));
 var import_icons11 = require("@elementor/icons");
 var import_i18n11 = require("@wordpress/i18n");
 function SetHome({ post }) {
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React18.createElement(
     ActionMenuItem,
     {
       title: (0, import_i18n11.__)("Set as homepage", "elementor"),
       icon: import_icons11.HomeIcon,
-      disabled: !!post.isHome,
-      onClick: () => null
+      ListItemButtonProps: {
+        disabled: !!post.isHome,
+        onClick: () => null
+      }
     }
   );
 }
@@ -772,11 +801,11 @@ function ListItemView({ post }) {
     disableAutoFocus: true
   });
   const isActive = activeDocument?.id === post.id;
-  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
     import_ui11.ListItem,
     {
       disablePadding: true,
-      secondaryAction: /* @__PURE__ */ React20.createElement(
+      secondaryAction: /* @__PURE__ */ React19.createElement(
         import_ui11.ToggleButton,
         {
           value: true,
@@ -784,10 +813,10 @@ function ListItemView({ post }) {
           selected: popupState.isOpen,
           ...(0, import_ui11.bindTrigger)(popupState)
         },
-        /* @__PURE__ */ React20.createElement(import_icons12.DotsVerticalIcon, { fontSize: "small" })
+        /* @__PURE__ */ React19.createElement(import_icons12.DotsVerticalIcon, { fontSize: "small" })
       )
     },
-    /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React19.createElement(
       import_ui11.ListItemButton,
       {
         selected: isActive,
@@ -798,29 +827,29 @@ function ListItemView({ post }) {
         },
         dense: true
       },
-      /* @__PURE__ */ React20.createElement(import_ui11.ListItemIcon, null),
-      /* @__PURE__ */ React20.createElement(
+      /* @__PURE__ */ React19.createElement(import_ui11.ListItemIcon, null),
+      /* @__PURE__ */ React19.createElement(
         import_ui11.ListItemText,
         {
           disableTypography: true
         },
-        /* @__PURE__ */ React20.createElement(PageTitleAndStatus, { page: post })
+        /* @__PURE__ */ React19.createElement(PageTitleAndStatus, { page: post })
       ),
-      post.isHome && /* @__PURE__ */ React20.createElement(import_ui11.ListItemIcon, null, /* @__PURE__ */ React20.createElement(import_icons12.HomeIcon, { color: "disabled" }))
+      post.isHome && /* @__PURE__ */ React19.createElement(import_ui11.ListItemIcon, null, /* @__PURE__ */ React19.createElement(import_icons12.HomeIcon, { color: "disabled" }))
     )
-  ), /* @__PURE__ */ React20.createElement(
+  ), /* @__PURE__ */ React19.createElement(
     import_ui11.Menu,
     {
       PaperProps: { sx: { mt: 4, width: 200 } },
       MenuListProps: { dense: true },
       ...(0, import_ui11.bindMenu)(popupState)
     },
-    /* @__PURE__ */ React20.createElement(Rename, { post }),
-    /* @__PURE__ */ React20.createElement(Duplicate, { post, popupState }),
-    /* @__PURE__ */ React20.createElement(Delete, { post }),
-    /* @__PURE__ */ React20.createElement(View, { post }),
-    /* @__PURE__ */ React20.createElement(import_ui11.Divider, null),
-    /* @__PURE__ */ React20.createElement(SetHome, { post })
+    /* @__PURE__ */ React19.createElement(Rename, { post }),
+    /* @__PURE__ */ React19.createElement(Duplicate, { post, popupState }),
+    /* @__PURE__ */ React19.createElement(Delete, { post }),
+    /* @__PURE__ */ React19.createElement(View, { post }),
+    /* @__PURE__ */ React19.createElement(import_ui11.Divider, null),
+    /* @__PURE__ */ React19.createElement(SetHome, { post })
   ));
 }
 
@@ -828,18 +857,18 @@ function ListItemView({ post }) {
 function PostListItem2({ post }) {
   const { editMode } = usePostListContext();
   if ("rename" === editMode.mode && post?.id && post?.id === editMode.details.postId) {
-    return /* @__PURE__ */ React21.createElement(ListItemRename, { post });
+    return /* @__PURE__ */ React20.createElement(ListItemRename, { post });
   }
   if ("create" === editMode.mode && !post) {
-    return /* @__PURE__ */ React21.createElement(ListItemCreate, null);
+    return /* @__PURE__ */ React20.createElement(ListItemCreate, null);
   }
-  if ("duplicate" === editMode.mode && post?.id && post?.id === editMode.details.postId) {
-    return /* @__PURE__ */ React21.createElement(ListItemDuplicate, { post });
+  if ("duplicate" === editMode.mode && !post) {
+    return /* @__PURE__ */ React20.createElement(ListItemDuplicate, null);
   }
   if (!post) {
     return null;
   }
-  return /* @__PURE__ */ React21.createElement(ListItemView, { post });
+  return /* @__PURE__ */ React20.createElement(ListItemView, { post });
 }
 
 // src/components/panel/posts-list/posts-collapsible-list.tsx
@@ -847,34 +876,34 @@ function PostsCollapsibleList({ isOpenByDefault = false }) {
   const { type, editMode } = usePostListContext();
   const { data: posts, isLoading: postsLoading } = usePosts(type);
   if (!posts || postsLoading) {
-    return /* @__PURE__ */ React22.createElement(import_ui12.Box, { spacing: 4, sx: { px: 6 } }, /* @__PURE__ */ React22.createElement(import_ui12.Skeleton, { variant: "text", sx: { fontSize: "2rem" } }), /* @__PURE__ */ React22.createElement(import_ui12.Skeleton, { variant: "rounded", width: "100%", height: "48" }));
+    return /* @__PURE__ */ React21.createElement(import_ui12.Box, { spacing: 4, sx: { px: 6 } }, /* @__PURE__ */ React21.createElement(import_ui12.Skeleton, { variant: "text", sx: { fontSize: "2rem" } }), /* @__PURE__ */ React21.createElement(import_ui12.Skeleton, { variant: "rounded", width: "100%", height: "48" }));
   }
   const label = `${postTypesMap[type].labels.plural_name} (${posts.length.toString()})`;
-  return /* @__PURE__ */ React22.createElement(import_ui12.List, { dense: true }, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React21.createElement(import_ui12.List, { dense: true }, /* @__PURE__ */ React21.createElement(
     CollapsibleList,
     {
       label,
       Icon: import_icons13.PageTypeIcon,
       isOpenByDefault: isOpenByDefault || false
     },
-    posts.map((post) => /* @__PURE__ */ React22.createElement(PostListItem2, { key: post.id, post })),
-    ["duplicate", "create"].includes(editMode.mode) && /* @__PURE__ */ React22.createElement(PostListItem2, null)
+    posts.map((post) => /* @__PURE__ */ React21.createElement(PostListItem2, { key: post.id, post })),
+    ["duplicate", "create"].includes(editMode.mode) && /* @__PURE__ */ React21.createElement(PostListItem2, null)
   ));
 }
 
 // src/components/panel/add-new-button.tsx
-var React23 = __toESM(require("react"));
+var React22 = __toESM(require("react"));
 var import_ui13 = require("@elementor/ui");
 var import_icons14 = require("@elementor/icons");
 var import_i18n12 = require("@wordpress/i18n");
 function AddNewButton() {
   const { setEditMode } = usePostListContext();
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React22.createElement(
     import_ui13.Button,
     {
       size: "small",
       sx: { mt: 4, mb: 4, mr: 5 },
-      startIcon: /* @__PURE__ */ React23.createElement(import_icons14.PlusIcon, null),
+      startIcon: /* @__PURE__ */ React22.createElement(import_icons14.PlusIcon, null),
       onClick: () => {
         setEditMode({ mode: "create", details: {} });
       }
@@ -885,15 +914,15 @@ function AddNewButton() {
 
 // src/components/panel/shell.tsx
 var Shell = () => {
-  return /* @__PURE__ */ React24.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React24.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React24.createElement(import_editor_panels.PanelHeaderTitle, null, (0, import_i18n13.__)("Pages", "elementor"))), /* @__PURE__ */ React24.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React24.createElement(PostListContextProvider, { type: "page" }, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React23.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React23.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React23.createElement(import_editor_panels.PanelHeaderTitle, null, (0, import_i18n13.__)("Pages", "elementor"))), /* @__PURE__ */ React23.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React23.createElement(PostListContextProvider, { type: "page" }, /* @__PURE__ */ React23.createElement(
     import_ui14.Box,
     {
       display: "flex",
       justifyContent: "flex-end",
       alignItems: "center"
     },
-    /* @__PURE__ */ React24.createElement(AddNewButton, null)
-  ), /* @__PURE__ */ React24.createElement(PostsCollapsibleList, { isOpenByDefault: true }))));
+    /* @__PURE__ */ React23.createElement(AddNewButton, null)
+  ), /* @__PURE__ */ React23.createElement(PostsCollapsibleList, { isOpenByDefault: true }))));
 };
 var shell_default = Shell;
 

package/dist/index.mjs

@@ -239,13 +239,13 @@ import { PagesIcon } from "@elementor/icons";
 import { createPanel } from "@elementor/editor-panels";
 
 // src/components/panel/shell.tsx
-import * as React24 from "react";
+import * as React23 from "react";
 import { Box as Box5 } from "@elementor/ui";
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
 import { __ as __13 } from "@wordpress/i18n";
 
 // src/components/panel/posts-list/posts-collapsible-list.tsx
-import * as React22 from "react";
+import * as React21 from "react";
 import { PageTypeIcon as PageTypeIcon2 } from "@elementor/icons";
 import { Skeleton, Box as Box4, List as List2 } from "@elementor/ui";
 
@@ -394,7 +394,7 @@ function CollapsibleList({
 }
 
 // src/components/panel/posts-list/post-list-item.tsx
-import * as React21 from "react";
+import * as React20 from "react";
 
 // src/components/panel/posts-list/list-items/list-item-rename.tsx
 import * as React9 from "react";
@@ -555,7 +555,7 @@ function ListItemCreate() {
 // src/components/panel/posts-list/list-items/list-item-duplicate.tsx
 import * as React11 from "react";
 import { __ as __6 } from "@wordpress/i18n";
-function ListItemDuplicate({ post }) {
+function ListItemDuplicate() {
   const { type, editMode, resetEditMode } = usePostListContext();
   const { duplicatePost } = usePostActions(type);
   if ("duplicate" !== editMode.mode) {
@@ -563,7 +563,7 @@ function ListItemDuplicate({ post }) {
   }
   const duplicatePostCallback = (inputValue) => {
     duplicatePost.mutateAsync({
-      id: post.id,
+      id: editMode.details.postId,
       title: inputValue
     }, {
       onSuccess: () => {
@@ -575,11 +575,11 @@ function ListItemDuplicate({ post }) {
 }
 
 // src/components/panel/posts-list/list-items/list-item-view.tsx
-import * as React20 from "react";
+import * as React19 from "react";
 import {
   bindMenu as bindMenu2,
   bindTrigger as bindTrigger2,
-  Divider as Divider2,
+  Divider as Divider3,
   ListItem as ListItem3,
   ListItemButton as ListItemButton2,
   ListItemIcon as ListItemIcon5,
@@ -635,129 +635,167 @@ function PageTitleAndStatus({ page }) {
 }
 
 // src/components/panel/actions-menu/actions/rename.tsx
-import * as React15 from "react";
+import * as React14 from "react";
 import { EraseIcon } from "@elementor/icons";
 import { __ as __7 } from "@wordpress/i18n";
 
 // src/components/panel/actions-menu/action-menu-item.tsx
-import * as React14 from "react";
-
-// src/components/panel/actions-menu/action-list-item.tsx
 import * as React13 from "react";
-import { ListItemButton, ListItemIcon as ListItemIcon4, ListItemText as ListItemText2 } from "@elementor/ui";
-function ActionListItem({ title, icon: Icon, disabled, onClick }) {
-  return /* @__PURE__ */ React13.createElement(
+import { ListItemButton, ListItemIcon as ListItemIcon4, ListItemText as ListItemText2, MenuItem as MenuItem3 } from "@elementor/ui";
+function ActionMenuItem({ title, icon: Icon, ListItemButtonProps }) {
+  return /* @__PURE__ */ React13.createElement(MenuItem3, { disableGutters: true }, /* @__PURE__ */ React13.createElement(
     ListItemButton,
     {
-      disabled,
-      onClick
+      ...ListItemButtonProps
     },
     /* @__PURE__ */ React13.createElement(ListItemIcon4, null, /* @__PURE__ */ React13.createElement(Icon, null)),
     /* @__PURE__ */ React13.createElement(ListItemText2, null, title)
-  );
-}
-
-// src/components/panel/actions-menu/action-menu-item.tsx
-import { MenuItem as MenuItem3 } from "@elementor/ui";
-function ActionMenuItem(props) {
-  return /* @__PURE__ */ React14.createElement(MenuItem3, { disableGutters: true }, /* @__PURE__ */ React14.createElement(ActionListItem, { ...props }));
+  ));
 }
 
 // src/components/panel/actions-menu/actions/rename.tsx
 function Rename({ post }) {
   const { setEditMode } = usePostListContext();
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React14.createElement(
     ActionMenuItem,
     {
       title: __7("Rename", "elementor"),
       icon: EraseIcon,
-      onClick: () => {
-        setEditMode({
-          mode: "rename",
-          details: {
-            postId: post.id
-          }
-        });
+      ListItemButtonProps: {
+        onClick: () => {
+          setEditMode({
+            mode: "rename",
+            details: {
+              postId: post.id
+            }
+          });
+        }
       }
     }
   );
 }
 
 // src/components/panel/actions-menu/actions/duplicate.tsx
-import * as React16 from "react";
+import * as React15 from "react";
 import { CopyIcon } from "@elementor/icons";
 import { __ as __8 } from "@wordpress/i18n";
 function Duplicate({ post, popupState }) {
   const { setEditMode } = usePostListContext();
-  return /* @__PURE__ */ React16.createElement(
+  const onClick = () => {
+    popupState.close();
+    setEditMode({
+      mode: "duplicate",
+      details: {
+        postId: post.id,
+        title: post.title.rendered
+      }
+    });
+  };
+  return /* @__PURE__ */ React15.createElement(
     ActionMenuItem,
     {
       title: __8("Duplicate", "elementor"),
       icon: CopyIcon,
-      onClick: () => {
-        popupState.close();
-        setEditMode({
-          mode: "duplicate",
-          details: {
-            postId: post.id,
-            title: post.title.rendered
-          }
-        });
+      ListItemButtonProps: {
+        onClick
       }
     }
   );
 }
 
 // src/components/panel/actions-menu/actions/delete.tsx
-import * as React17 from "react";
+import * as React16 from "react";
 import { TrashIcon } from "@elementor/icons";
+import { __ as __9, sprintf } from "@wordpress/i18n";
+import {
+  Button as Button2,
+  CircularProgress as CircularProgress3,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Divider as Divider2
+} from "@elementor/ui";
+import { useState as useState6 } from "react";
 import { useActiveDocument as useActiveDocument2 } from "@elementor/editor-documents";
-import { __ as __9 } from "@wordpress/i18n";
 function Delete({ post }) {
+  const [isDialogOpen, setIsDialogOpen] = useState6(false);
   const activeDocument = useActiveDocument2();
-  const isActive = activeDocument?.id === post.id;
-  return /* @__PURE__ */ React17.createElement(
+  const isPostActive = activeDocument?.id === post.id;
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
     ActionMenuItem,
     {
       title: __9("Delete", "elementor"),
       icon: TrashIcon,
-      disabled: post.isHome || isActive,
-      onClick: () => null
+      ListItemButtonProps: {
+        disabled: post.isHome || isPostActive,
+        onClick: () => setIsDialogOpen(true),
+        sx: { "&:hover": { color: "error.main" } }
+      }
     }
+  ), isDialogOpen && /* @__PURE__ */ React16.createElement(DeleteDialog, { post, setIsDialogOpen }));
+}
+function DeleteDialog({ post, setIsDialogOpen }) {
+  const { type } = usePostListContext();
+  const { deletePost } = usePostActions(type);
+  const dialogTitle = sprintf(__9("Delete \u201C%s\u201D?", "elementor"), post.title.rendered);
+  const deletePage = async () => {
+    await deletePost.mutateAsync(post.id);
+  };
+  const handleCancel = () => {
+    if (deletePost.isLoading) {
+      return;
+    }
+    setIsDialogOpen(false);
+  };
+  return /* @__PURE__ */ React16.createElement(
+    Dialog,
+    {
+      open: true,
+      onClose: handleCancel,
+      "aria-labelledby": "delete-dialog"
+    },
+    /* @__PURE__ */ React16.createElement(DialogTitle, null, dialogTitle),
+    /* @__PURE__ */ React16.createElement(Divider2, null),
+    /* @__PURE__ */ React16.createElement(DialogContent, null, /* @__PURE__ */ React16.createElement(DialogContentText, null, __9("The page and its content will be deleted forever and we won\u2019t be able to recover them.", "elementor"))),
+    /* @__PURE__ */ React16.createElement(DialogActions, null, /* @__PURE__ */ React16.createElement(Button2, { variant: "contained", color: "secondary", onClick: handleCancel, disabled: deletePost.isLoading }, __9("Cancel", "elementor")), /* @__PURE__ */ React16.createElement(Button2, { variant: "contained", color: "error", onClick: deletePage, disabled: deletePost.isLoading }, !deletePost.isLoading ? __9("Delete", "elementor") : /* @__PURE__ */ React16.createElement(CircularProgress3, null)))
   );
 }
 
 // src/components/panel/actions-menu/actions/view.tsx
-import * as React18 from "react";
+import * as React17 from "react";
 import { EyeIcon } from "@elementor/icons";
 import { __ as __10 } from "@wordpress/i18n";
 function View({ post }) {
   const { type } = usePostListContext();
   const title = __10("View %s", "elementor").replace("%s", postTypesMap[type].labels.singular_name);
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React17.createElement(
     ActionMenuItem,
     {
       title,
       icon: EyeIcon,
-      onClick: () => {
-        window.open(post.link, "_blank");
+      ListItemButtonProps: {
+        onClick: () => window.open(post.link, "_blank")
       }
     }
   );
 }
 
 // src/components/panel/actions-menu/actions/set-home.tsx
-import * as React19 from "react";
+import * as React18 from "react";
 import { HomeIcon } from "@elementor/icons";
 import { __ as __11 } from "@wordpress/i18n";
 function SetHome({ post }) {
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React18.createElement(
     ActionMenuItem,
     {
       title: __11("Set as homepage", "elementor"),
       icon: HomeIcon,
-      disabled: !!post.isHome,
-      onClick: () => null
+      ListItemButtonProps: {
+        disabled: !!post.isHome,
+        onClick: () => null
+      }
     }
   );
 }
@@ -772,11 +810,11 @@ function ListItemView({ post }) {
     disableAutoFocus: true
   });
   const isActive = activeDocument?.id === post.id;
-  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
     ListItem3,
     {
       disablePadding: true,
-      secondaryAction: /* @__PURE__ */ React20.createElement(
+      secondaryAction: /* @__PURE__ */ React19.createElement(
         ToggleButton,
         {
           value: true,
@@ -784,10 +822,10 @@ function ListItemView({ post }) {
           selected: popupState.isOpen,
           ...bindTrigger2(popupState)
         },
-        /* @__PURE__ */ React20.createElement(DotsVerticalIcon, { fontSize: "small" })
+        /* @__PURE__ */ React19.createElement(DotsVerticalIcon, { fontSize: "small" })
       )
     },
-    /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React19.createElement(
       ListItemButton2,
       {
         selected: isActive,
@@ -798,29 +836,29 @@ function ListItemView({ post }) {
         },
         dense: true
       },
-      /* @__PURE__ */ React20.createElement(ListItemIcon5, null),
-      /* @__PURE__ */ React20.createElement(
+      /* @__PURE__ */ React19.createElement(ListItemIcon5, null),
+      /* @__PURE__ */ React19.createElement(
         ListItemText3,
         {
           disableTypography: true
         },
-        /* @__PURE__ */ React20.createElement(PageTitleAndStatus, { page: post })
+        /* @__PURE__ */ React19.createElement(PageTitleAndStatus, { page: post })
       ),
-      post.isHome && /* @__PURE__ */ React20.createElement(ListItemIcon5, null, /* @__PURE__ */ React20.createElement(HomeIcon2, { color: "disabled" }))
+      post.isHome && /* @__PURE__ */ React19.createElement(ListItemIcon5, null, /* @__PURE__ */ React19.createElement(HomeIcon2, { color: "disabled" }))
     )
-  ), /* @__PURE__ */ React20.createElement(
+  ), /* @__PURE__ */ React19.createElement(
     Menu2,
     {
       PaperProps: { sx: { mt: 4, width: 200 } },
       MenuListProps: { dense: true },
       ...bindMenu2(popupState)
     },
-    /* @__PURE__ */ React20.createElement(Rename, { post }),
-    /* @__PURE__ */ React20.createElement(Duplicate, { post, popupState }),
-    /* @__PURE__ */ React20.createElement(Delete, { post }),
-    /* @__PURE__ */ React20.createElement(View, { post }),
-    /* @__PURE__ */ React20.createElement(Divider2, null),
-    /* @__PURE__ */ React20.createElement(SetHome, { post })
+    /* @__PURE__ */ React19.createElement(Rename, { post }),
+    /* @__PURE__ */ React19.createElement(Duplicate, { post, popupState }),
+    /* @__PURE__ */ React19.createElement(Delete, { post }),
+    /* @__PURE__ */ React19.createElement(View, { post }),
+    /* @__PURE__ */ React19.createElement(Divider3, null),
+    /* @__PURE__ */ React19.createElement(SetHome, { post })
   ));
 }
 
@@ -828,18 +866,18 @@ function ListItemView({ post }) {
 function PostListItem2({ post }) {
   const { editMode } = usePostListContext();
   if ("rename" === editMode.mode && post?.id && post?.id === editMode.details.postId) {
-    return /* @__PURE__ */ React21.createElement(ListItemRename, { post });
+    return /* @__PURE__ */ React20.createElement(ListItemRename, { post });
   }
   if ("create" === editMode.mode && !post) {
-    return /* @__PURE__ */ React21.createElement(ListItemCreate, null);
+    return /* @__PURE__ */ React20.createElement(ListItemCreate, null);
   }
-  if ("duplicate" === editMode.mode && post?.id && post?.id === editMode.details.postId) {
-    return /* @__PURE__ */ React21.createElement(ListItemDuplicate, { post });
+  if ("duplicate" === editMode.mode && !post) {
+    return /* @__PURE__ */ React20.createElement(ListItemDuplicate, null);
   }
   if (!post) {
     return null;
   }
-  return /* @__PURE__ */ React21.createElement(ListItemView, { post });
+  return /* @__PURE__ */ React20.createElement(ListItemView, { post });
 }
 
 // src/components/panel/posts-list/posts-collapsible-list.tsx
@@ -847,34 +885,34 @@ function PostsCollapsibleList({ isOpenByDefault = false }) {
   const { type, editMode } = usePostListContext();
   const { data: posts, isLoading: postsLoading } = usePosts(type);
   if (!posts || postsLoading) {
-    return /* @__PURE__ */ React22.createElement(Box4, { spacing: 4, sx: { px: 6 } }, /* @__PURE__ */ React22.createElement(Skeleton, { variant: "text", sx: { fontSize: "2rem" } }), /* @__PURE__ */ React22.createElement(Skeleton, { variant: "rounded", width: "100%", height: "48" }));
+    return /* @__PURE__ */ React21.createElement(Box4, { spacing: 4, sx: { px: 6 } }, /* @__PURE__ */ React21.createElement(Skeleton, { variant: "text", sx: { fontSize: "2rem" } }), /* @__PURE__ */ React21.createElement(Skeleton, { variant: "rounded", width: "100%", height: "48" }));
   }
   const label = `${postTypesMap[type].labels.plural_name} (${posts.length.toString()})`;
-  return /* @__PURE__ */ React22.createElement(List2, { dense: true }, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React21.createElement(List2, { dense: true }, /* @__PURE__ */ React21.createElement(
     CollapsibleList,
     {
       label,
       Icon: PageTypeIcon2,
       isOpenByDefault: isOpenByDefault || false
     },
-    posts.map((post) => /* @__PURE__ */ React22.createElement(PostListItem2, { key: post.id, post })),
-    ["duplicate", "create"].includes(editMode.mode) && /* @__PURE__ */ React22.createElement(PostListItem2, null)
+    posts.map((post) => /* @__PURE__ */ React21.createElement(PostListItem2, { key: post.id, post })),
+    ["duplicate", "create"].includes(editMode.mode) && /* @__PURE__ */ React21.createElement(PostListItem2, null)
   ));
 }
 
 // src/components/panel/add-new-button.tsx
-import * as React23 from "react";
-import { Button as Button2 } from "@elementor/ui";
+import * as React22 from "react";
+import { Button as Button3 } from "@elementor/ui";
 import { PlusIcon as PlusIcon2 } from "@elementor/icons";
 import { __ as __12 } from "@wordpress/i18n";
 function AddNewButton() {
   const { setEditMode } = usePostListContext();
-  return /* @__PURE__ */ React23.createElement(
-    Button2,
+  return /* @__PURE__ */ React22.createElement(
+    Button3,
     {
       size: "small",
       sx: { mt: 4, mb: 4, mr: 5 },
-      startIcon: /* @__PURE__ */ React23.createElement(PlusIcon2, null),
+      startIcon: /* @__PURE__ */ React22.createElement(PlusIcon2, null),
       onClick: () => {
         setEditMode({ mode: "create", details: {} });
       }
@@ -885,15 +923,15 @@ function AddNewButton() {
 
 // src/components/panel/shell.tsx
 var Shell = () => {
-  return /* @__PURE__ */ React24.createElement(Panel, null, /* @__PURE__ */ React24.createElement(PanelHeader, null, /* @__PURE__ */ React24.createElement(PanelHeaderTitle, null, __13("Pages", "elementor"))), /* @__PURE__ */ React24.createElement(PanelBody, null, /* @__PURE__ */ React24.createElement(PostListContextProvider, { type: "page" }, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React23.createElement(Panel, null, /* @__PURE__ */ React23.createElement(PanelHeader, null, /* @__PURE__ */ React23.createElement(PanelHeaderTitle, null, __13("Pages", "elementor"))), /* @__PURE__ */ React23.createElement(PanelBody, null, /* @__PURE__ */ React23.createElement(PostListContextProvider, { type: "page" }, /* @__PURE__ */ React23.createElement(
     Box5,
     {
       display: "flex",
       justifyContent: "flex-end",
       alignItems: "center"
     },
-    /* @__PURE__ */ React24.createElement(AddNewButton, null)
-  ), /* @__PURE__ */ React24.createElement(PostsCollapsibleList, { isOpenByDefault: true }))));
+    /* @__PURE__ */ React23.createElement(AddNewButton, null)
+  ), /* @__PURE__ */ React23.createElement(PostsCollapsibleList, { isOpenByDefault: true }))));
 };
 var shell_default = Shell;
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/editor-site-navigation",
-	"version": "0.14.0",
+	"version": "0.16.0",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -49,5 +49,5 @@
 	"elementor": {
 		"type": "extension"
 	},
-	"gitHead": "025f7ec0942da99205377c41e713afe1e8f7898d"
+	"gitHead": "673479dfda4fe5feae87a229e7b371b8fb19c0ee"
 }

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

@@ -1,11 +1,26 @@
 import * as React from 'react';
-import ActionListItem, { Props as ActionListItemProps } from './action-list-item';
-import { MenuItem } from '@elementor/ui';
+import { ListItemButton, ListItemIcon, ListItemText, MenuItem, ListItemButtonProps as ListItemButtonPropsType } from '@elementor/ui';
+import { ComponentType } from 'react';
 
-export default function ActionMenuItem( props: ActionListItemProps ) {
+export type Props = {
+	title: string;
+	icon: ComponentType;
+	ListItemButtonProps: ListItemButtonPropsType;
+}
+
+export default function ActionMenuItem( { title, icon: Icon, ListItemButtonProps }: Props ) {
 	return (
 		<MenuItem disableGutters>
-			<ActionListItem { ...props } />
+			<ListItemButton
+				{ ...ListItemButtonProps }
+			>
+				<ListItemIcon>
+					<Icon />
+				</ListItemIcon>
+				<ListItemText>
+					{ title }
+				</ListItemText>
+			</ListItemButton>
 		</MenuItem>
 	);
 }

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

@@ -0,0 +1,82 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import * as React from 'react';
+import { Post } from '../../../../../types';
+import Delete from '../delete';
+
+const mockMutateAsync = jest.fn();
+jest.mock( '../../../../../hooks/use-posts-actions', () => ( {
+	usePostActions: () => ( {
+		deletePost: {
+			mutateAsync: mockMutateAsync,
+			isLoading: false,
+		},
+	} ),
+} ) );
+
+jest.mock( '@elementor/editor-documents', () => ( {
+	useActiveDocument: jest.fn(),
+} ) );
+
+describe( '@elementor/editor-site-navigation/pages-panel-actions - Delete', () => {
+	afterAll( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should render Delete, display the modal and run the delete action', () => {
+		// Arrange.
+		const post: Post = {
+			id: 1,
+			title: {
+				rendered: 'Test Page',
+			},
+			status: 'publish',
+			type: 'page',
+			link: 'https://example.local/test-page',
+			isHome: false,
+		};
+
+		// Act.
+		render( <Delete post={ post } /> );
+
+		// Assert.
+		const button = screen.getByRole( 'button' );
+		expect( button ).not.toHaveAttribute( 'aria-disabled' );
+
+		// Open the modal.
+		fireEvent.click( button );
+
+		const modal = screen.getByText( 'Delete “Test Page”?' );
+		expect( modal ).toBeInTheDocument();
+
+		const modalButtons = screen.getAllByRole( 'button' );
+		expect( modalButtons[ 0 ] ).toHaveTextContent( 'Cancel' );
+		expect( modalButtons[ 1 ] ).toHaveTextContent( 'Delete' );
+
+		// Click the delete button.
+		fireEvent.click( modalButtons[ 1 ] );
+
+		expect( mockMutateAsync ).toHaveBeenCalledTimes( 1 );
+		expect( mockMutateAsync ).toHaveBeenCalledWith( post.id );
+	} );
+
+	it( 'should render Delete disabled when post is homepage', () => {
+		// Arrange.
+		const post: Post = {
+			id: 1,
+			title: {
+				rendered: 'Test Page',
+			},
+			status: 'draft',
+			type: 'page',
+			link: 'https://example.local/test-page',
+			isHome: true,
+		};
+
+		// Act.
+		render( <Delete post={ post } /> );
+
+		// Assert.
+		const button = screen.getByRole( 'button' );
+		expect( button ).toHaveAttribute( 'aria-disabled', 'true' );
+	} );
+} );

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

@@ -1,21 +1,94 @@
 import * as React from 'react';
 import { TrashIcon } from '@elementor/icons';
 import { Post } from '../../../../types';
-import { useActiveDocument } from '@elementor/editor-documents';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import ActionMenuItem from '../action-menu-item';
+import { usePostActions } from '../../../../hooks/use-posts-actions';
+import {
+	Button,
+	CircularProgress,
+	Dialog,
+	DialogActions,
+	DialogContent,
+	DialogContentText,
+	DialogTitle,
+	Divider,
+} from '@elementor/ui';
+import { usePostListContext } from '../../../../contexts/post-list-context';
+import { useState } from 'react';
+import { useActiveDocument } from '@elementor/editor-documents';
 
 export default function Delete( { post }: { post: Post } ) {
+	const [ isDialogOpen, setIsDialogOpen ] = useState( false );
 	const activeDocument = useActiveDocument();
 
-	const isActive = activeDocument?.id === post.id;
+	const isPostActive = activeDocument?.id === post.id;
+
+	return (
+		<>
+			<ActionMenuItem
+				title={ __( 'Delete', 'elementor' ) }
+				icon={ TrashIcon }
+				ListItemButtonProps={
+					{
+						disabled: post.isHome || isPostActive,
+						onClick: () => setIsDialogOpen( true ),
+						sx: { '&:hover': { color: 'error.main' } },
+					}
+				}
+			/>
+
+			{
+				isDialogOpen && (
+					<DeleteDialog post={ post } setIsDialogOpen={ setIsDialogOpen } />
+				)
+			}
+		</>
+	);
+}
+
+function DeleteDialog( { post, setIsDialogOpen }: { post: Post, setIsDialogOpen: React.Dispatch<React.SetStateAction<boolean>> } ) {
+	const { type } = usePostListContext();
+	const { deletePost } = usePostActions( type );
+
+	/* translators: %s: Post title. */
+	const dialogTitle = sprintf( __( 'Delete “%s”?', 'elementor' ), post.title.rendered );
+
+	const deletePage = async () => {
+		await deletePost.mutateAsync( post.id );
+	};
+
+	const handleCancel = () => {
+		if ( deletePost.isLoading ) {
+			return;
+		}
+
+		setIsDialogOpen( false );
+	};
 
 	return (
-		<ActionMenuItem
-			title={ __( 'Delete', 'elementor' ) }
-			icon={ TrashIcon }
-			disabled={ post.isHome || isActive }
-			onClick={ () => null }
-		/>
+		<Dialog
+			open={ true }
+			onClose={ handleCancel }
+			aria-labelledby="delete-dialog"
+		>
+			<DialogTitle>
+				{ dialogTitle }
+			</DialogTitle>
+			<Divider />
+			<DialogContent>
+				<DialogContentText>
+					{ __( '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.isLoading }>
+					{ __( 'Cancel', 'elementor' ) }
+				</Button>
+				<Button variant="contained" color="error" onClick={ deletePage } disabled={ deletePost.isLoading } >
+					{ ! deletePost.isLoading ? __( 'Delete', 'elementor' ) : <CircularProgress /> }
+				</Button>
+			</DialogActions>
+		</Dialog>
 	);
 }

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

@@ -9,21 +9,27 @@ import { Post } from '../../../../types';
 export default function Duplicate( { post, popupState }: { post: Post, popupState: PopupState } ) {
 	const { setEditMode } = usePostListContext();
 
+	const onClick = () => {
+		popupState.close();
+
+		setEditMode( {
+			mode: 'duplicate',
+			details: {
+				postId: post.id,
+				title: post.title.rendered,
+			},
+		} );
+	};
+
 	return (
 		<ActionMenuItem
 			title={ __( 'Duplicate', 'elementor' ) }
 			icon={ CopyIcon }
-			onClick={ () => {
-				popupState.close();
-
-				setEditMode( {
-					mode: 'duplicate',
-					details: {
-						postId: post.id,
-						title: post.title.rendered,
-					},
-				} );
-			} }
+			ListItemButtonProps={
+				{
+					onClick,
+				}
+			}
 		/>
 	);
 }

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

@@ -12,14 +12,18 @@ export default function Rename( { post }: { post: Post } ) {
 		<ActionMenuItem
 			title={ __( 'Rename', 'elementor' ) }
 			icon={ EraseIcon }
-			onClick={ () => {
-				setEditMode( {
-					mode: 'rename',
-					details: {
-						postId: post.id,
+			ListItemButtonProps={
+				{
+					onClick: () => {
+						setEditMode( {
+							mode: 'rename',
+							details: {
+								postId: post.id,
+							},
+						} );
 					},
-				} );
-			} }
+				}
+			}
 		/>
 	);
 }

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

@@ -9,8 +9,12 @@ export default function SetHome( { post }: { post: Post } ) {
 		<ActionMenuItem
 			title={ __( 'Set as homepage', 'elementor' ) }
 			icon={ HomeIcon }
-			disabled={ !! post.isHome }
-			onClick={ () => null }
+			ListItemButtonProps={
+				{
+					disabled: !! post.isHome,
+					onClick: () => null,
+				}
+			}
 		/>
 	);
 }

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

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

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

@@ -3,13 +3,8 @@ import { __ } from '@wordpress/i18n';
 import { usePostListContext } from '../../../../contexts/post-list-context';
 import { usePostActions } from '../../../../hooks/use-posts-actions';
 import EditModeTemplate from './edit-mode-template';
-import { Post } from '../../../../types';
 
-type Props = {
-	post: Post,
-}
-
-export default function ListItemDuplicate( { post }: Props ) {
+export default function ListItemDuplicate() {
 	const { type, editMode, resetEditMode } = usePostListContext();
 	const { duplicatePost } = usePostActions( type );
 
@@ -19,7 +14,7 @@ export default function ListItemDuplicate( { post }: Props ) {
 
 	const duplicatePostCallback = ( inputValue: string ) => {
 		duplicatePost.mutateAsync( {
-			id: post.id,
+			id: editMode.details.postId,
 			title: inputValue,
 		}, {
 			onSuccess: () => {

package/src/components/panel/posts-list/post-list-item.tsx

@@ -17,8 +17,8 @@ export default function PostListItem( { post }: { post?: Post } ) {
 		return <ListItemCreate />;
 	}
 
-	if ( 'duplicate' === editMode.mode && post?.id && post?.id === editMode.details.postId ) {
-		return <ListItemDuplicate post={ post } />;
+	if ( 'duplicate' === editMode.mode && ! post ) {
+		return <ListItemDuplicate />;
 	}
 
 	if ( ! post ) {

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

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { ComponentType } from 'react';
-import { ListItemButton, ListItemIcon, ListItemText } from '@elementor/ui';
-import { Post } from '../../../types';
-
-export type Props = {
-	title: string;
-	icon: ComponentType;
-	disabled?: boolean;
-	onClick: ( post: Post ) => void;
-}
-
-export default function ActionListItem( { title, icon: Icon, disabled, onClick }: Props ) {
-	return (
-		<ListItemButton
-			disabled={ disabled }
-			onClick={ onClick }
-		>
-			<ListItemIcon>
-				<Icon />
-			</ListItemIcon>
-			<ListItemText>
-				{ title }
-			</ListItemText>
-		</ListItemButton>
-	);
-}