@elementor/editor-site-navigation 0.10.3 → 0.12.0

package/dist/index.mjs

@@ -232,23 +232,120 @@ function RecentlyEdited() {
 import { injectIntoPageIndication, toolsMenu } from "@elementor/editor-app-bar";
 
 // src/hooks/useToggleButtonProps.ts
-import { __ as __10 } from "@wordpress/i18n";
+import { __ as __14 } from "@wordpress/i18n";
 import { PagesIcon } from "@elementor/icons";
 
 // src/components/panel/panel.ts
 import { createPanel } from "@elementor/editor-panels";
 
 // src/components/panel/shell.tsx
-import * as React19 from "react";
-import { Box as Box4, List as List2 } from "@elementor/ui";
+import * as React24 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/pages-list/pages-collapsible-list.tsx
-import * as React17 from "react";
+// 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";
+
+// src/hooks/use-posts.ts
+import { useQuery } from "@elementor/query";
 
-// src/components/panel/pages-list/collapsible-list.tsx
+// src/api/post.ts
+import apiFetch3 from "@wordpress/api-fetch";
+import { __ as __3 } from "@wordpress/i18n";
+var postTypesMap = {
+  page: {
+    labels: {
+      singular_name: __3("Page", "elementor"),
+      plural_name: __3("Pages", "elementor")
+    },
+    rest_base: "pages"
+  }
+};
+var getRequest = (postTypeSlug) => {
+  const baseUri = `/wp/v2/${postTypesMap[postTypeSlug].rest_base}`;
+  const keys = ["id", "type", "title", "link", "status"];
+  const queryParams = new URLSearchParams({
+    status: "any",
+    per_page: "-1",
+    order: "asc",
+    _fields: keys.join(",")
+  });
+  const uri = baseUri + "?" + queryParams.toString();
+  return apiFetch3({ path: uri });
+};
+var createRequest = (postTypeSlug, newPost) => {
+  const path = `/wp/v2/${postTypesMap[postTypeSlug].rest_base}`;
+  return apiFetch3({
+    path,
+    method: "POST",
+    data: newPost
+  });
+};
+var updateRequest = (postTypeSlug, updatedPost) => {
+  const path = `/wp/v2/${postTypesMap[postTypeSlug].rest_base}`;
+  const { id, ...data } = updatedPost;
+  return apiFetch3({
+    path: `${path}/${id}`,
+    method: "POST",
+    data
+  });
+};
+var deleteRequest = (postTypeSlug, postId) => {
+  const path = `/wp/v2/${postTypesMap[postTypeSlug].rest_base}`;
+  return apiFetch3({
+    path: `${path}/${postId}`,
+    method: "DELETE"
+  });
+};
+
+// src/hooks/use-posts.ts
+var postsQueryKey = (postTypeSlug) => ["site-navigation", "posts", postTypeSlug];
+function usePosts(postTypeSlug) {
+  return useQuery({
+    queryKey: postsQueryKey(postTypeSlug),
+    queryFn: () => getRequest(postTypeSlug)
+  });
+}
+
+// src/contexts/post-list-context.tsx
 import * as React6 from "react";
-import { useState as useState3 } from "react";
+import { useState as useState3, useContext, createContext } from "react";
+var defaultValues = {
+  type: "page",
+  editMode: { mode: "none", details: {} },
+  setEditMode: () => null,
+  resetEditMode: () => null
+};
+var PostListContext = createContext(defaultValues);
+var PostListContextProvider = ({
+  type,
+  children
+}) => {
+  const [editMode, setEditMode] = useState3(defaultValues.editMode);
+  const resetEditMode = () => {
+    setEditMode(defaultValues.editMode);
+  };
+  return /* @__PURE__ */ React6.createElement(PostListContext.Provider, { value: {
+    type,
+    editMode,
+    setEditMode,
+    resetEditMode
+  } }, children);
+};
+function usePostListContext() {
+  const context = useContext(PostListContext);
+  if (!context) {
+    throw new Error("The `usePostListContext()` hook must be used within an `<PostListContextProvider />`");
+  }
+  return context;
+}
+
+// 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 } from "@elementor/ui";
 import { ChevronDownIcon as ChevronDownIcon2 } from "@elementor/icons";
 var RotateIcon = styled(ChevronDownIcon2, {
@@ -265,39 +362,213 @@ function CollapsibleList({
   isOpenByDefault = false,
   children
 }) {
-  const [isOpen, setIsOpen] = useState3(isOpenByDefault);
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(ListItem, { disableGutters: true }, /* @__PURE__ */ React6.createElement(ListItemIcon2, null, /* @__PURE__ */ React6.createElement(
+  const [isOpen, setIsOpen] = useState4(isOpenByDefault);
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(ListItem, { disableGutters: true }, /* @__PURE__ */ React7.createElement(ListItemIcon2, null, /* @__PURE__ */ React7.createElement(
     IconButton,
     {
       onClick: () => setIsOpen((prev) => !prev),
       sx: { color: "inherit" },
       size: "small"
     },
-    /* @__PURE__ */ React6.createElement(RotateIcon, { fontSize: "small", isOpen })
-  )), /* @__PURE__ */ React6.createElement(ListItemIcon2, null, /* @__PURE__ */ React6.createElement(Icon, null)), /* @__PURE__ */ React6.createElement(ListItemText, null, label)), /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement(RotateIcon, { fontSize: "small", isOpen })
+  )), /* @__PURE__ */ React7.createElement(ListItemIcon2, null, /* @__PURE__ */ React7.createElement(Icon, null)), /* @__PURE__ */ React7.createElement(ListItemText, null, label)), /* @__PURE__ */ React7.createElement(
     Collapse,
     {
       in: isOpen,
       timeout: "auto",
       unmountOnExit: true
     },
-    /* @__PURE__ */ React6.createElement(List, { dense: true }, children)
+    /* @__PURE__ */ React7.createElement(List, { dense: true }, children)
   ));
 }
 
-// src/components/panel/pages-list/pages-collapsible-list.tsx
-import { PageTypeIcon as PageTypeIcon2 } from "@elementor/icons";
-import { Skeleton, Box as Box3 } from "@elementor/ui";
+// src/components/panel/posts-list/post-list-item.tsx
+import * as React21 from "react";
 
-// src/components/panel/pages-list/page-list-item.tsx
-import * as React16 from "react";
+// src/components/panel/posts-list/list-items/list-item-rename.tsx
+import * as React9 from "react";
+
+// src/hooks/use-posts-actions.ts
+import { useQueryClient, useMutation } from "@elementor/query";
+function usePostActions(postTypeSlug) {
+  const invalidatePosts = useInvalidatePosts(postTypeSlug);
+  const onSuccess = () => invalidatePosts({ exact: true });
+  const createPost = useMutation(
+    (newPost) => createRequest(postTypeSlug, newPost),
+    { onSuccess }
+  );
+  const updatePost = useMutation(
+    (updatedPost) => updateRequest(postTypeSlug, updatedPost),
+    { onSuccess }
+  );
+  const deletePost = useMutation(
+    (postId) => deleteRequest(postTypeSlug, postId),
+    { onSuccess }
+  );
+  return {
+    createPost,
+    updatePost,
+    deletePost
+  };
+}
+function useInvalidatePosts(postTypeSlug) {
+  const queryClient = useQueryClient();
+  return (options = {}) => {
+    const queryKey = postsQueryKey(postTypeSlug);
+    return queryClient.invalidateQueries(queryKey, options);
+  };
+}
+
+// src/components/panel/posts-list/list-items/edit-mode-template.tsx
+import * as React8 from "react";
+import { useState as useState5, useRef } from "react";
+import {
+  Box as Box2,
+  ListItem as ListItem2,
+  ListItemIcon as ListItemIcon3,
+  TextField,
+  IconButton as IconButton2,
+  CircularProgress as CircularProgress2
+} from "@elementor/ui";
+import { XIcon } from "@elementor/icons";
+import { __ as __4 } from "@wordpress/i18n";
+function EditModeTemplate({ postTitle, isLoading, callback }) {
+  const inputRef = useRef();
+  const [inputError, setInputError] = useState5("");
+  const closeButton = useRef();
+  const onBlur = (e) => {
+    if (closeButton.current === e.relatedTarget) {
+      return;
+    }
+    runCallback();
+  };
+  const onFormSubmit = (e) => {
+    e.preventDefault();
+    runCallback();
+  };
+  const validateInput = () => {
+    let isValid = true;
+    if (inputRef.current?.value === "") {
+      isValid = false;
+      setInputError(__4("Name is required", "elementor"));
+    }
+    return isValid;
+  };
+  const runCallback = () => {
+    if (!validateInput()) {
+      return;
+    }
+    callback(inputRef.current?.value || "");
+  };
+  return /* @__PURE__ */ React8.createElement(
+    ListItem2,
+    {
+      selected: true,
+      disablePadding: true,
+      secondaryAction: /* @__PURE__ */ React8.createElement(CloseButton, { isLoading, closeButton })
+    },
+    /* @__PURE__ */ React8.createElement(ListItemIcon3, null),
+    /* @__PURE__ */ React8.createElement(Box2, { component: "form", onSubmit: onFormSubmit }, /* @__PURE__ */ React8.createElement(
+      TextField,
+      {
+        autoFocus: true,
+        ref: inputRef,
+        defaultValue: postTitle,
+        disabled: isLoading,
+        error: !!inputError,
+        onBlur,
+        variant: "outlined",
+        size: "small"
+      }
+    ))
+  );
+}
+function CloseButton({ isLoading, closeButton }) {
+  const { resetEditMode } = usePostListContext();
+  return /* @__PURE__ */ React8.createElement(
+    IconButton2,
+    {
+      size: "small",
+      onClick: resetEditMode,
+      ref: closeButton,
+      disabled: isLoading
+    },
+    isLoading ? /* @__PURE__ */ React8.createElement(CircularProgress2, null) : /* @__PURE__ */ React8.createElement(XIcon, { fontSize: "small" })
+  );
+}
+
+// src/components/panel/posts-list/list-items/list-item-rename.tsx
+function ListItemRename({ post }) {
+  const { type, resetEditMode } = usePostListContext();
+  const { updatePost } = usePostActions(type);
+  const renamePostCallback = (inputValue) => {
+    if (inputValue === post.title.rendered) {
+      resetEditMode();
+    }
+    updatePost.mutateAsync({
+      id: post.id,
+      title: inputValue
+    }, {
+      onSuccess: () => {
+        resetEditMode();
+      }
+    });
+  };
+  return /* @__PURE__ */ React9.createElement(EditModeTemplate, { postTitle: post.title.rendered, isLoading: updatePost.isLoading, callback: renamePostCallback });
+}
+
+// src/components/panel/posts-list/list-items/list-item-create.tsx
+import * as React10 from "react";
+import { __ as __5 } from "@wordpress/i18n";
+function ListItemCreate() {
+  const { type, resetEditMode } = usePostListContext();
+  const { createPost } = usePostActions(type);
+  const createPostCallback = (inputValue) => {
+    createPost.mutateAsync({
+      title: inputValue,
+      status: "draft"
+    }, {
+      onSuccess: () => {
+        resetEditMode();
+      }
+    });
+  };
+  return /* @__PURE__ */ React10.createElement(EditModeTemplate, { postTitle: __5("New Page", "elementor"), isLoading: createPost.isLoading, callback: createPostCallback });
+}
+
+// src/components/panel/posts-list/list-items/list-item-duplicate.tsx
+import * as React11 from "react";
+import { __ as __6 } from "@wordpress/i18n";
+function ListItemDuplicate() {
+  const { type, editMode, resetEditMode } = usePostListContext();
+  const { createPost } = usePostActions(type);
+  if ("duplicate" !== editMode.mode) {
+    return null;
+  }
+  const duplicatePostCallback = (inputValue) => {
+    createPost.mutateAsync({
+      title: inputValue,
+      status: "draft"
+    }, {
+      onSuccess: () => {
+        resetEditMode();
+      }
+    });
+  };
+  return /* @__PURE__ */ React11.createElement(EditModeTemplate, { postTitle: `${editMode.details.title} ${__6("copy", "elementor")}`, isLoading: createPost.isLoading, callback: duplicatePostCallback });
+}
+
+// src/components/panel/posts-list/list-items/list-item-view.tsx
+import * as React20 from "react";
 import {
   bindMenu as bindMenu2,
   bindTrigger as bindTrigger2,
-  ListItem as ListItem2,
+  Divider as Divider2,
+  ListItem as ListItem3,
   ListItemButton as ListItemButton2,
-  ListItemIcon as ListItemIcon4,
+  ListItemIcon as ListItemIcon5,
   ListItemText as ListItemText3,
+  Menu as Menu2,
   ToggleButton,
   usePopupState as usePopupState2
 } from "@elementor/ui";
@@ -305,13 +576,13 @@ import { DotsVerticalIcon, HomeIcon as HomeIcon2 } from "@elementor/icons";
 import { useActiveDocument as useActiveDocument3, useNavigateToDocument as useNavigateToDocument3 } from "@elementor/editor-documents";
 
 // src/components/shared/page-title-and-status.tsx
-import * as React7 from "react";
-import { Box as Box2, Typography as Typography3 } from "@elementor/ui";
+import * as React12 from "react";
+import { Box as Box3, Typography as Typography3 } from "@elementor/ui";
 var PageStatus = ({ status }) => {
   if ("publish" === status) {
     return null;
   }
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React12.createElement(
     Typography3,
     {
       component: "span",
@@ -330,7 +601,7 @@ var PageStatus = ({ status }) => {
 };
 var PageTitle = ({ title }) => {
   const modifiedTitle = useReverseHtmlEntities(title);
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React12.createElement(
     Typography3,
     {
       component: "span",
@@ -344,260 +615,269 @@ var PageTitle = ({ title }) => {
   );
 };
 function PageTitleAndStatus({ page }) {
-  return /* @__PURE__ */ React7.createElement(Box2, { display: "flex" }, /* @__PURE__ */ React7.createElement(PageTitle, { title: page.title.rendered }), "\xA0", /* @__PURE__ */ React7.createElement(PageStatus, { status: page.status }));
+  return /* @__PURE__ */ React12.createElement(Box3, { display: "flex" }, /* @__PURE__ */ React12.createElement(PageTitle, { title: page.title.rendered }), "\xA0", /* @__PURE__ */ React12.createElement(PageStatus, { status: page.status }));
 }
 
-// src/components/panel/actions-menu/page-actions-menu.tsx
+// src/components/panel/actions-menu/actions/rename.tsx
 import * as React15 from "react";
-import { Divider as Divider2, Menu as Menu2 } from "@elementor/ui";
-
-// src/components/panel/pages-actions/rename.tsx
-import * as React10 from "react";
 import { EraseIcon } from "@elementor/icons";
-import { __ as __3 } from "@wordpress/i18n";
+import { __ as __7 } from "@wordpress/i18n";
 
 // src/components/panel/actions-menu/action-menu-item.tsx
-import * as React9 from "react";
+import * as React14 from "react";
 
 // src/components/panel/actions-menu/action-list-item.tsx
-import * as React8 from "react";
-import { ListItemButton, ListItemIcon as ListItemIcon3, ListItemText as ListItemText2 } from "@elementor/ui";
+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__ */ React8.createElement(
+  return /* @__PURE__ */ React13.createElement(
     ListItemButton,
     {
       disabled,
       onClick
     },
-    /* @__PURE__ */ React8.createElement(ListItemIcon3, null, /* @__PURE__ */ React8.createElement(Icon, null)),
-    /* @__PURE__ */ React8.createElement(ListItemText2, null, title)
+    /* @__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__ */ React9.createElement(MenuItem3, { disableGutters: true }, /* @__PURE__ */ React9.createElement(ActionListItem, { ...props }));
+  return /* @__PURE__ */ React14.createElement(MenuItem3, { disableGutters: true }, /* @__PURE__ */ React14.createElement(ActionListItem, { ...props }));
 }
 
-// src/components/panel/pages-actions/rename.tsx
-function Rename() {
-  return /* @__PURE__ */ React10.createElement(
+// src/components/panel/actions-menu/actions/rename.tsx
+function Rename({ post }) {
+  const { setEditMode } = usePostListContext();
+  return /* @__PURE__ */ React15.createElement(
     ActionMenuItem,
     {
-      title: __3("Rename", "elementor"),
+      title: __7("Rename", "elementor"),
       icon: EraseIcon,
-      onClick: () => null
+      onClick: () => {
+        setEditMode({
+          mode: "rename",
+          details: {
+            postId: post.id
+          }
+        });
+      }
     }
   );
 }
 
-// src/components/panel/pages-actions/duplicate.tsx
-import * as React11 from "react";
-import { __ as __4 } from "@wordpress/i18n";
+// src/components/panel/actions-menu/actions/duplicate.tsx
+import * as React16 from "react";
 import { CopyIcon } from "@elementor/icons";
-function Duplicate() {
-  return /* @__PURE__ */ React11.createElement(
+import { __ as __8 } from "@wordpress/i18n";
+function Duplicate({ post, popupState }) {
+  const { setEditMode } = usePostListContext();
+  return /* @__PURE__ */ React16.createElement(
     ActionMenuItem,
     {
-      title: __4("Duplicate", "elementor"),
+      title: __8("Duplicate", "elementor"),
       icon: CopyIcon,
-      onClick: () => null
+      onClick: () => {
+        popupState.close();
+        setEditMode({
+          mode: "duplicate",
+          details: {
+            postId: post.id,
+            title: post.title.rendered
+          }
+        });
+      }
     }
   );
 }
 
-// src/components/panel/pages-actions/delete.tsx
-import * as React12 from "react";
+// src/components/panel/actions-menu/actions/delete.tsx
+import * as React17 from "react";
 import { TrashIcon } from "@elementor/icons";
 import { useActiveDocument as useActiveDocument2 } from "@elementor/editor-documents";
-import { __ as __5 } from "@wordpress/i18n";
-function Delete({ page }) {
+import { __ as __9 } from "@wordpress/i18n";
+function Delete({ post }) {
   const activeDocument = useActiveDocument2();
-  const isActive = activeDocument?.id === page.id;
-  return /* @__PURE__ */ React12.createElement(
+  const isActive = activeDocument?.id === post.id;
+  return /* @__PURE__ */ React17.createElement(
     ActionMenuItem,
     {
-      title: __5("Delete", "elementor"),
+      title: __9("Delete", "elementor"),
       icon: TrashIcon,
-      disabled: page.isHome || isActive,
+      disabled: post.isHome || isActive,
       onClick: () => null
     }
   );
 }
 
-// src/components/panel/pages-actions/view.tsx
-import * as React13 from "react";
+// src/components/panel/actions-menu/actions/view.tsx
+import * as React18 from "react";
 import { EyeIcon } from "@elementor/icons";
-import { __ as __6 } from "@wordpress/i18n";
-function View() {
-  return /* @__PURE__ */ React13.createElement(
+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(
     ActionMenuItem,
     {
-      title: __6("View Page", "elementor"),
+      title,
       icon: EyeIcon,
-      onClick: () => null
+      onClick: () => {
+        console.log(post);
+      }
     }
   );
 }
 
-// src/components/panel/pages-actions/set-home.tsx
-import * as React14 from "react";
+// src/components/panel/actions-menu/actions/set-home.tsx
+import * as React19 from "react";
 import { HomeIcon } from "@elementor/icons";
-import { __ as __7 } from "@wordpress/i18n";
-function SetHome({ page }) {
-  return /* @__PURE__ */ React14.createElement(
+import { __ as __11 } from "@wordpress/i18n";
+function SetHome({ post }) {
+  return /* @__PURE__ */ React19.createElement(
     ActionMenuItem,
     {
-      title: __7("Set as homepage", "elementor"),
+      title: __11("Set as homepage", "elementor"),
       icon: HomeIcon,
-      disabled: !!page.isHome,
+      disabled: !!post.isHome,
       onClick: () => null
     }
   );
 }
 
-// src/components/panel/actions-menu/page-actions-menu.tsx
-function PageActionsMenu({ page, ...props }) {
-  return /* @__PURE__ */ React15.createElement(
-    Menu2,
-    {
-      PaperProps: { sx: { mt: 4, width: 200 } },
-      MenuListProps: { dense: true },
-      ...props
-    },
-    /* @__PURE__ */ React15.createElement(Rename, null),
-    /* @__PURE__ */ React15.createElement(Duplicate, null),
-    /* @__PURE__ */ React15.createElement(Delete, { page }),
-    /* @__PURE__ */ React15.createElement(View, null),
-    /* @__PURE__ */ React15.createElement(Divider2, null),
-    /* @__PURE__ */ React15.createElement(SetHome, { page })
-  );
-}
-
-// src/components/panel/pages-list/page-list-item.tsx
-function PageListItem({ page }) {
+// src/components/panel/posts-list/list-items/list-item-view.tsx
+function ListItemView({ post }) {
+  const activeDocument = useActiveDocument3();
+  const navigateToDocument = useNavigateToDocument3();
   const popupState = usePopupState2({
     variant: "popover",
-    popupId: "page-actions"
+    popupId: "post-actions",
+    disableAutoFocus: true
   });
-  const activeDocument = useActiveDocument3();
-  const navigateToDocument = useNavigateToDocument3();
-  const isActive = activeDocument?.id === page.id;
-  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
-    ListItem2,
+  const isActive = activeDocument?.id === post.id;
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
+    ListItem3,
     {
       disablePadding: true,
-      secondaryAction: /* @__PURE__ */ React16.createElement(
+      secondaryAction: /* @__PURE__ */ React20.createElement(
         ToggleButton,
         {
           value: true,
-          color: "secondary",
           size: "small",
           selected: popupState.isOpen,
           ...bindTrigger2(popupState)
         },
-        /* @__PURE__ */ React16.createElement(DotsVerticalIcon, { fontSize: "small" })
+        /* @__PURE__ */ React20.createElement(DotsVerticalIcon, { fontSize: "small" })
       )
     },
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React20.createElement(
       ListItemButton2,
       {
         selected: isActive,
-        onClick: () => navigateToDocument(page.id),
+        onClick: () => {
+          if (!isActive) {
+            navigateToDocument(post.id);
+          }
+        },
         dense: true
       },
-      /* @__PURE__ */ React16.createElement(ListItemIcon4, null),
-      /* @__PURE__ */ React16.createElement(
+      /* @__PURE__ */ React20.createElement(ListItemIcon5, null),
+      /* @__PURE__ */ React20.createElement(
         ListItemText3,
         {
           disableTypography: true
         },
-        /* @__PURE__ */ React16.createElement(PageTitleAndStatus, { page })
+        /* @__PURE__ */ React20.createElement(PageTitleAndStatus, { page: post })
       ),
-      page.isHome && /* @__PURE__ */ React16.createElement(ListItemIcon4, null, /* @__PURE__ */ React16.createElement(HomeIcon2, { color: "disabled" }))
+      post.isHome && /* @__PURE__ */ React20.createElement(ListItemIcon5, null, /* @__PURE__ */ React20.createElement(HomeIcon2, { color: "disabled" }))
     )
-  ), /* @__PURE__ */ React16.createElement(PageActionsMenu, { page, ...bindMenu2(popupState) }));
+  ), /* @__PURE__ */ React20.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 })
+  ));
 }
 
-// src/hooks/use-posts.ts
-import { useQuery } from "@elementor/query";
-
-// src/api/post.ts
-import apiFetch3 from "@wordpress/api-fetch";
-var postTypesMap = {
-  page: "pages"
-};
-var getRequest = (postTypeSlug) => {
-  const baseUri = `/wp/v2/${postTypesMap[postTypeSlug]}`;
-  const keys = ["id", "type", "title", "link", "status"];
-  const queryParams = new URLSearchParams({
-    status: "any",
-    per_page: "-1",
-    _fields: keys.join(",")
-  });
-  const uri = baseUri + "?" + queryParams.toString();
-  return apiFetch3({ path: uri });
-};
-
-// src/hooks/use-posts.ts
-var postsQueryKey = (postTypeSlug) => ["site-navigation", "posts", postTypeSlug];
-function usePosts(postTypeSlug) {
-  return useQuery({
-    queryKey: postsQueryKey(postTypeSlug),
-    queryFn: () => getRequest(postTypeSlug)
-  });
+// src/components/panel/posts-list/post-list-item.tsx
+function PostListItem2({ post }) {
+  const { editMode } = usePostListContext();
+  if ("rename" === editMode.mode && post?.id && post?.id === editMode.details.postId) {
+    return /* @__PURE__ */ React21.createElement(ListItemRename, { post });
+  }
+  if ("create" === editMode.mode && !post) {
+    return /* @__PURE__ */ React21.createElement(ListItemCreate, null);
+  }
+  if ("duplicate" === editMode.mode && !post) {
+    return /* @__PURE__ */ React21.createElement(ListItemDuplicate, null);
+  }
+  if (!post) {
+    return null;
+  }
+  return /* @__PURE__ */ React21.createElement(ListItemView, { post });
 }
 
-// src/components/panel/pages-list/pages-collapsible-list.tsx
-import { __ as __8 } from "@wordpress/i18n";
-function PagesCollapsibleList({ isOpenByDefault = false }) {
-  const { data: pages, isLoading: pagesLoading } = usePosts("page");
-  if (!pages || pagesLoading) {
-    return /* @__PURE__ */ React17.createElement(Box3, { spacing: 4, sx: { px: 6 } }, /* @__PURE__ */ React17.createElement(Skeleton, { variant: "text", sx: { fontSize: "2rem" } }), /* @__PURE__ */ React17.createElement(Skeleton, { variant: "rounded", width: "100%", height: "48" }));
+// src/components/panel/posts-list/posts-collapsible-list.tsx
+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" }));
   }
-  const label = __8("Pages (%s)", "elementor").replace("%s", pages.length.toString());
-  return /* @__PURE__ */ React17.createElement(
+  const label = `${postTypesMap[type].labels.plural_name} (${posts.length.toString()})`;
+  return /* @__PURE__ */ React22.createElement(List2, { dense: true }, /* @__PURE__ */ React22.createElement(
     CollapsibleList,
     {
       label,
       Icon: PageTypeIcon2,
-      isOpenByDefault
+      isOpenByDefault: isOpenByDefault || false
     },
-    pages.map((page) => /* @__PURE__ */ React17.createElement(PageListItem, { key: page.id, page }))
-  );
+    posts.map((post) => /* @__PURE__ */ React22.createElement(PostListItem2, { key: post.id, post })),
+    ["duplicate", "create"].includes(editMode.mode) && /* @__PURE__ */ React22.createElement(PostListItem2, null)
+  ));
 }
 
-// src/components/panel/shell.tsx
-import { __ as __9 } from "@wordpress/i18n";
-
-// src/components/panel/add-new-page-button.tsx
+// src/components/panel/add-new-button.tsx
+import * as React23 from "react";
 import { Button as Button2 } from "@elementor/ui";
 import { PlusIcon as PlusIcon2 } from "@elementor/icons";
-import * as React18 from "react";
-function AddNewPageButton() {
-  return /* @__PURE__ */ React18.createElement(
+import { __ as __12 } from "@wordpress/i18n";
+function AddNewButton() {
+  const { setEditMode } = usePostListContext();
+  return /* @__PURE__ */ React23.createElement(
     Button2,
     {
+      size: "small",
       sx: { mt: 4, mb: 4, mr: 5 },
-      startIcon: /* @__PURE__ */ React18.createElement(PlusIcon2, null),
-      onClick: () => null
+      startIcon: /* @__PURE__ */ React23.createElement(PlusIcon2, null),
+      onClick: () => {
+        setEditMode({ mode: "create", details: {} });
+      }
     },
-    "Add New"
+    __12("Add New", "elementor")
   );
 }
 
 // src/components/panel/shell.tsx
 var Shell = () => {
-  return /* @__PURE__ */ React19.createElement(Panel, null, /* @__PURE__ */ React19.createElement(PanelHeader, null, /* @__PURE__ */ React19.createElement(PanelHeaderTitle, null, __9("Pages", "elementor"))), /* @__PURE__ */ React19.createElement(PanelBody, null, /* @__PURE__ */ React19.createElement(
-    Box4,
+  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(
+    Box5,
     {
       display: "flex",
       justifyContent: "flex-end",
       alignItems: "center"
     },
-    /* @__PURE__ */ React19.createElement(AddNewPageButton, null)
-  ), /* @__PURE__ */ React19.createElement(List2, { dense: true }, /* @__PURE__ */ React19.createElement(PagesCollapsibleList, { isOpenByDefault: true }))));
+    /* @__PURE__ */ React24.createElement(AddNewButton, null)
+  ), /* @__PURE__ */ React24.createElement(PostsCollapsibleList, { isOpenByDefault: true }))));
 };
 var shell_default = Shell;
 
@@ -616,7 +896,7 @@ function useToggleButtonProps() {
   const { isOpen, isBlocked } = usePanelStatus();
   const { open, close } = usePanelActions();
   return {
-    title: __10("Pages", "elementor"),
+    title: __14("Pages", "elementor"),
     icon: PagesIcon,
     onClick: () => isOpen ? close() : open(),
     selected: isOpen,
@@ -636,7 +916,7 @@ var { env, validateEnv } = parseEnv("@elementor/editor-site-navigation", (envDat
 // src/init.ts
 function init() {
   registerTopBarMenuItems();
-  if (env.is_panel_active) {
+  if (env.is_pages_panel_active) {
     registerPanel(panel);
     registerButton();
   }