@elementor/editor-site-navigation 0.10.3 → 0.12.0

package/dist/index.js

@@ -250,23 +250,120 @@ function RecentlyEdited() {
 var import_editor_app_bar = require("@elementor/editor-app-bar");
 
 // src/hooks/useToggleButtonProps.ts
-var import_i18n10 = require("@wordpress/i18n");
-var import_icons14 = require("@elementor/icons");
+var import_i18n14 = require("@wordpress/i18n");
+var import_icons15 = require("@elementor/icons");
 
 // src/components/panel/panel.ts
 var import_editor_panels2 = require("@elementor/editor-panels");
 
 // src/components/panel/shell.tsx
-var React19 = __toESM(require("react"));
+var React24 = __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/pages-list/pages-collapsible-list.tsx
-var React17 = __toESM(require("react"));
+// src/components/panel/posts-list/posts-collapsible-list.tsx
+var React22 = __toESM(require("react"));
+var import_icons13 = require("@elementor/icons");
+var import_ui12 = require("@elementor/ui");
 
-// src/components/panel/pages-list/collapsible-list.tsx
+// src/hooks/use-posts.ts
+var import_query = require("@elementor/query");
+
+// src/api/post.ts
+var import_api_fetch3 = __toESM(require("@wordpress/api-fetch"));
+var import_i18n3 = require("@wordpress/i18n");
+var postTypesMap = {
+  page: {
+    labels: {
+      singular_name: (0, import_i18n3.__)("Page", "elementor"),
+      plural_name: (0, import_i18n3.__)("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 (0, import_api_fetch3.default)({ path: uri });
+};
+var createRequest = (postTypeSlug, newPost) => {
+  const path = `/wp/v2/${postTypesMap[postTypeSlug].rest_base}`;
+  return (0, import_api_fetch3.default)({
+    path,
+    method: "POST",
+    data: newPost
+  });
+};
+var updateRequest = (postTypeSlug, updatedPost) => {
+  const path = `/wp/v2/${postTypesMap[postTypeSlug].rest_base}`;
+  const { id, ...data } = updatedPost;
+  return (0, import_api_fetch3.default)({
+    path: `${path}/${id}`,
+    method: "POST",
+    data
+  });
+};
+var deleteRequest = (postTypeSlug, postId) => {
+  const path = `/wp/v2/${postTypesMap[postTypeSlug].rest_base}`;
+  return (0, import_api_fetch3.default)({
+    path: `${path}/${postId}`,
+    method: "DELETE"
+  });
+};
+
+// src/hooks/use-posts.ts
+var postsQueryKey = (postTypeSlug) => ["site-navigation", "posts", postTypeSlug];
+function usePosts(postTypeSlug) {
+  return (0, import_query.useQuery)({
+    queryKey: postsQueryKey(postTypeSlug),
+    queryFn: () => getRequest(postTypeSlug)
+  });
+}
+
+// src/contexts/post-list-context.tsx
 var React6 = __toESM(require("react"));
 var import_react4 = require("react");
+var defaultValues = {
+  type: "page",
+  editMode: { mode: "none", details: {} },
+  setEditMode: () => null,
+  resetEditMode: () => null
+};
+var PostListContext = (0, import_react4.createContext)(defaultValues);
+var PostListContextProvider = ({
+  type,
+  children
+}) => {
+  const [editMode, setEditMode] = (0, import_react4.useState)(defaultValues.editMode);
+  const resetEditMode = () => {
+    setEditMode(defaultValues.editMode);
+  };
+  return /* @__PURE__ */ React6.createElement(PostListContext.Provider, { value: {
+    type,
+    editMode,
+    setEditMode,
+    resetEditMode
+  } }, children);
+};
+function usePostListContext() {
+  const context = (0, import_react4.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
+var React7 = __toESM(require("react"));
+var import_react5 = require("react");
 var import_ui6 = require("@elementor/ui");
 var import_icons5 = require("@elementor/icons");
 var RotateIcon = (0, import_ui6.styled)(import_icons5.ChevronDownIcon, {
@@ -283,45 +380,210 @@ function CollapsibleList({
   isOpenByDefault = false,
   children
 }) {
-  const [isOpen, setIsOpen] = (0, import_react4.useState)(isOpenByDefault);
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(import_ui6.ListItem, { disableGutters: true }, /* @__PURE__ */ React6.createElement(import_ui6.ListItemIcon, null, /* @__PURE__ */ React6.createElement(
+  const [isOpen, setIsOpen] = (0, import_react5.useState)(isOpenByDefault);
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(import_ui6.ListItem, { disableGutters: true }, /* @__PURE__ */ React7.createElement(import_ui6.ListItemIcon, null, /* @__PURE__ */ React7.createElement(
     import_ui6.IconButton,
     {
       onClick: () => setIsOpen((prev) => !prev),
       sx: { color: "inherit" },
       size: "small"
     },
-    /* @__PURE__ */ React6.createElement(RotateIcon, { fontSize: "small", isOpen })
-  )), /* @__PURE__ */ React6.createElement(import_ui6.ListItemIcon, null, /* @__PURE__ */ React6.createElement(Icon, null)), /* @__PURE__ */ React6.createElement(import_ui6.ListItemText, null, label)), /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement(RotateIcon, { fontSize: "small", isOpen })
+  )), /* @__PURE__ */ React7.createElement(import_ui6.ListItemIcon, null, /* @__PURE__ */ React7.createElement(Icon, null)), /* @__PURE__ */ React7.createElement(import_ui6.ListItemText, null, label)), /* @__PURE__ */ React7.createElement(
     import_ui6.Collapse,
     {
       in: isOpen,
       timeout: "auto",
       unmountOnExit: true
     },
-    /* @__PURE__ */ React6.createElement(import_ui6.List, { dense: true }, children)
+    /* @__PURE__ */ React7.createElement(import_ui6.List, { dense: true }, children)
   ));
 }
 
-// src/components/panel/pages-list/pages-collapsible-list.tsx
-var import_icons12 = require("@elementor/icons");
-var import_ui12 = require("@elementor/ui");
+// src/components/panel/posts-list/post-list-item.tsx
+var React21 = __toESM(require("react"));
 
-// src/components/panel/pages-list/page-list-item.tsx
-var React16 = __toESM(require("react"));
+// src/components/panel/posts-list/list-items/list-item-rename.tsx
+var React9 = __toESM(require("react"));
+
+// src/hooks/use-posts-actions.ts
+var import_query2 = require("@elementor/query");
+function usePostActions(postTypeSlug) {
+  const invalidatePosts = useInvalidatePosts(postTypeSlug);
+  const onSuccess = () => invalidatePosts({ exact: true });
+  const createPost = (0, import_query2.useMutation)(
+    (newPost) => createRequest(postTypeSlug, newPost),
+    { onSuccess }
+  );
+  const updatePost = (0, import_query2.useMutation)(
+    (updatedPost) => updateRequest(postTypeSlug, updatedPost),
+    { onSuccess }
+  );
+  const deletePost = (0, import_query2.useMutation)(
+    (postId) => deleteRequest(postTypeSlug, postId),
+    { onSuccess }
+  );
+  return {
+    createPost,
+    updatePost,
+    deletePost
+  };
+}
+function useInvalidatePosts(postTypeSlug) {
+  const queryClient = (0, import_query2.useQueryClient)();
+  return (options = {}) => {
+    const queryKey = postsQueryKey(postTypeSlug);
+    return queryClient.invalidateQueries(queryKey, options);
+  };
+}
+
+// src/components/panel/posts-list/list-items/edit-mode-template.tsx
+var React8 = __toESM(require("react"));
+var import_react6 = require("react");
+var import_ui7 = require("@elementor/ui");
+var import_icons6 = require("@elementor/icons");
+var import_i18n4 = require("@wordpress/i18n");
+function EditModeTemplate({ postTitle, isLoading, callback }) {
+  const inputRef = (0, import_react6.useRef)();
+  const [inputError, setInputError] = (0, import_react6.useState)("");
+  const closeButton = (0, import_react6.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((0, import_i18n4.__)("Name is required", "elementor"));
+    }
+    return isValid;
+  };
+  const runCallback = () => {
+    if (!validateInput()) {
+      return;
+    }
+    callback(inputRef.current?.value || "");
+  };
+  return /* @__PURE__ */ React8.createElement(
+    import_ui7.ListItem,
+    {
+      selected: true,
+      disablePadding: true,
+      secondaryAction: /* @__PURE__ */ React8.createElement(CloseButton, { isLoading, closeButton })
+    },
+    /* @__PURE__ */ React8.createElement(import_ui7.ListItemIcon, null),
+    /* @__PURE__ */ React8.createElement(import_ui7.Box, { component: "form", onSubmit: onFormSubmit }, /* @__PURE__ */ React8.createElement(
+      import_ui7.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(
+    import_ui7.IconButton,
+    {
+      size: "small",
+      onClick: resetEditMode,
+      ref: closeButton,
+      disabled: isLoading
+    },
+    isLoading ? /* @__PURE__ */ React8.createElement(import_ui7.CircularProgress, null) : /* @__PURE__ */ React8.createElement(import_icons6.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
+var React10 = __toESM(require("react"));
+var import_i18n5 = require("@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: (0, import_i18n5.__)("New Page", "elementor"), isLoading: createPost.isLoading, callback: createPostCallback });
+}
+
+// src/components/panel/posts-list/list-items/list-item-duplicate.tsx
+var React11 = __toESM(require("react"));
+var import_i18n6 = require("@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} ${(0, import_i18n6.__)("copy", "elementor")}`, isLoading: createPost.isLoading, callback: duplicatePostCallback });
+}
+
+// src/components/panel/posts-list/list-items/list-item-view.tsx
+var React20 = __toESM(require("react"));
 var import_ui11 = require("@elementor/ui");
-var import_icons11 = require("@elementor/icons");
+var import_icons12 = require("@elementor/icons");
 var import_editor_documents5 = require("@elementor/editor-documents");
 
 // src/components/shared/page-title-and-status.tsx
-var React7 = __toESM(require("react"));
-var import_ui7 = require("@elementor/ui");
+var React12 = __toESM(require("react"));
+var import_ui8 = require("@elementor/ui");
 var PageStatus = ({ status }) => {
   if ("publish" === status) {
     return null;
   }
-  return /* @__PURE__ */ React7.createElement(
-    import_ui7.Typography,
+  return /* @__PURE__ */ React12.createElement(
+    import_ui8.Typography,
     {
       component: "span",
       variant: "body1",
@@ -339,8 +601,8 @@ var PageStatus = ({ status }) => {
 };
 var PageTitle = ({ title }) => {
   const modifiedTitle = useReverseHtmlEntities(title);
-  return /* @__PURE__ */ React7.createElement(
-    import_ui7.Typography,
+  return /* @__PURE__ */ React12.createElement(
+    import_ui8.Typography,
     {
       component: "span",
       variant: "body1",
@@ -353,260 +615,269 @@ var PageTitle = ({ title }) => {
   );
 };
 function PageTitleAndStatus({ page }) {
-  return /* @__PURE__ */ React7.createElement(import_ui7.Box, { display: "flex" }, /* @__PURE__ */ React7.createElement(PageTitle, { title: page.title.rendered }), "\xA0", /* @__PURE__ */ React7.createElement(PageStatus, { status: page.status }));
+  return /* @__PURE__ */ React12.createElement(import_ui8.Box, { 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
 var React15 = __toESM(require("react"));
-var import_ui10 = require("@elementor/ui");
-
-// src/components/panel/pages-actions/rename.tsx
-var React10 = __toESM(require("react"));
-var import_icons6 = require("@elementor/icons");
-var import_i18n3 = require("@wordpress/i18n");
+var import_icons7 = require("@elementor/icons");
+var import_i18n7 = require("@wordpress/i18n");
 
 // src/components/panel/actions-menu/action-menu-item.tsx
-var React9 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 
 // src/components/panel/actions-menu/action-list-item.tsx
-var React8 = __toESM(require("react"));
-var import_ui8 = require("@elementor/ui");
+var React13 = __toESM(require("react"));
+var import_ui9 = require("@elementor/ui");
 function ActionListItem({ title, icon: Icon, disabled, onClick }) {
-  return /* @__PURE__ */ React8.createElement(
-    import_ui8.ListItemButton,
+  return /* @__PURE__ */ React13.createElement(
+    import_ui9.ListItemButton,
     {
       disabled,
       onClick
     },
-    /* @__PURE__ */ React8.createElement(import_ui8.ListItemIcon, null, /* @__PURE__ */ React8.createElement(Icon, null)),
-    /* @__PURE__ */ React8.createElement(import_ui8.ListItemText, null, title)
+    /* @__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_ui9 = require("@elementor/ui");
+var import_ui10 = require("@elementor/ui");
 function ActionMenuItem(props) {
-  return /* @__PURE__ */ React9.createElement(import_ui9.MenuItem, { disableGutters: true }, /* @__PURE__ */ React9.createElement(ActionListItem, { ...props }));
+  return /* @__PURE__ */ React14.createElement(import_ui10.MenuItem, { 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: (0, import_i18n3.__)("Rename", "elementor"),
-      icon: import_icons6.EraseIcon,
-      onClick: () => null
+      title: (0, import_i18n7.__)("Rename", "elementor"),
+      icon: import_icons7.EraseIcon,
+      onClick: () => {
+        setEditMode({
+          mode: "rename",
+          details: {
+            postId: post.id
+          }
+        });
+      }
     }
   );
 }
 
-// src/components/panel/pages-actions/duplicate.tsx
-var React11 = __toESM(require("react"));
-var import_i18n4 = require("@wordpress/i18n");
-var import_icons7 = require("@elementor/icons");
-function Duplicate() {
-  return /* @__PURE__ */ React11.createElement(
+// src/components/panel/actions-menu/actions/duplicate.tsx
+var React16 = __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(
     ActionMenuItem,
     {
-      title: (0, import_i18n4.__)("Duplicate", "elementor"),
-      icon: import_icons7.CopyIcon,
-      onClick: () => null
+      title: (0, import_i18n8.__)("Duplicate", "elementor"),
+      icon: import_icons8.CopyIcon,
+      onClick: () => {
+        popupState.close();
+        setEditMode({
+          mode: "duplicate",
+          details: {
+            postId: post.id,
+            title: post.title.rendered
+          }
+        });
+      }
     }
   );
 }
 
-// src/components/panel/pages-actions/delete.tsx
-var React12 = __toESM(require("react"));
-var import_icons8 = require("@elementor/icons");
+// src/components/panel/actions-menu/actions/delete.tsx
+var React17 = __toESM(require("react"));
+var import_icons9 = require("@elementor/icons");
 var import_editor_documents4 = require("@elementor/editor-documents");
-var import_i18n5 = require("@wordpress/i18n");
-function Delete({ page }) {
+var import_i18n9 = require("@wordpress/i18n");
+function Delete({ post }) {
   const activeDocument = (0, import_editor_documents4.useActiveDocument)();
-  const isActive = activeDocument?.id === page.id;
-  return /* @__PURE__ */ React12.createElement(
+  const isActive = activeDocument?.id === post.id;
+  return /* @__PURE__ */ React17.createElement(
     ActionMenuItem,
     {
-      title: (0, import_i18n5.__)("Delete", "elementor"),
-      icon: import_icons8.TrashIcon,
-      disabled: page.isHome || isActive,
+      title: (0, import_i18n9.__)("Delete", "elementor"),
+      icon: import_icons9.TrashIcon,
+      disabled: post.isHome || isActive,
       onClick: () => null
     }
   );
 }
 
-// src/components/panel/pages-actions/view.tsx
-var React13 = __toESM(require("react"));
-var import_icons9 = require("@elementor/icons");
-var import_i18n6 = require("@wordpress/i18n");
-function View() {
-  return /* @__PURE__ */ React13.createElement(
+// src/components/panel/actions-menu/actions/view.tsx
+var React18 = __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(
     ActionMenuItem,
     {
-      title: (0, import_i18n6.__)("View Page", "elementor"),
-      icon: import_icons9.EyeIcon,
-      onClick: () => null
+      title,
+      icon: import_icons10.EyeIcon,
+      onClick: () => {
+        console.log(post);
+      }
     }
   );
 }
 
-// src/components/panel/pages-actions/set-home.tsx
-var React14 = __toESM(require("react"));
-var import_icons10 = require("@elementor/icons");
-var import_i18n7 = require("@wordpress/i18n");
-function SetHome({ page }) {
-  return /* @__PURE__ */ React14.createElement(
+// src/components/panel/actions-menu/actions/set-home.tsx
+var React19 = __toESM(require("react"));
+var import_icons11 = require("@elementor/icons");
+var import_i18n11 = require("@wordpress/i18n");
+function SetHome({ post }) {
+  return /* @__PURE__ */ React19.createElement(
     ActionMenuItem,
     {
-      title: (0, import_i18n7.__)("Set as homepage", "elementor"),
-      icon: import_icons10.HomeIcon,
-      disabled: !!page.isHome,
+      title: (0, import_i18n11.__)("Set as homepage", "elementor"),
+      icon: import_icons11.HomeIcon,
+      disabled: !!post.isHome,
       onClick: () => null
     }
   );
 }
 
-// src/components/panel/actions-menu/page-actions-menu.tsx
-function PageActionsMenu({ page, ...props }) {
-  return /* @__PURE__ */ React15.createElement(
-    import_ui10.Menu,
-    {
-      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(import_ui10.Divider, 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 = (0, import_editor_documents5.useActiveDocument)();
+  const navigateToDocument = (0, import_editor_documents5.useNavigateToDocument)();
   const popupState = (0, import_ui11.usePopupState)({
     variant: "popover",
-    popupId: "page-actions"
+    popupId: "post-actions",
+    disableAutoFocus: true
   });
-  const activeDocument = (0, import_editor_documents5.useActiveDocument)();
-  const navigateToDocument = (0, import_editor_documents5.useNavigateToDocument)();
-  const isActive = activeDocument?.id === page.id;
-  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
+  const isActive = activeDocument?.id === post.id;
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
     import_ui11.ListItem,
     {
       disablePadding: true,
-      secondaryAction: /* @__PURE__ */ React16.createElement(
+      secondaryAction: /* @__PURE__ */ React20.createElement(
         import_ui11.ToggleButton,
         {
           value: true,
-          color: "secondary",
           size: "small",
           selected: popupState.isOpen,
           ...(0, import_ui11.bindTrigger)(popupState)
         },
-        /* @__PURE__ */ React16.createElement(import_icons11.DotsVerticalIcon, { fontSize: "small" })
+        /* @__PURE__ */ React20.createElement(import_icons12.DotsVerticalIcon, { fontSize: "small" })
       )
     },
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React20.createElement(
       import_ui11.ListItemButton,
       {
         selected: isActive,
-        onClick: () => navigateToDocument(page.id),
+        onClick: () => {
+          if (!isActive) {
+            navigateToDocument(post.id);
+          }
+        },
         dense: true
       },
-      /* @__PURE__ */ React16.createElement(import_ui11.ListItemIcon, null),
-      /* @__PURE__ */ React16.createElement(
+      /* @__PURE__ */ React20.createElement(import_ui11.ListItemIcon, null),
+      /* @__PURE__ */ React20.createElement(
         import_ui11.ListItemText,
         {
           disableTypography: true
         },
-        /* @__PURE__ */ React16.createElement(PageTitleAndStatus, { page })
+        /* @__PURE__ */ React20.createElement(PageTitleAndStatus, { page: post })
       ),
-      page.isHome && /* @__PURE__ */ React16.createElement(import_ui11.ListItemIcon, null, /* @__PURE__ */ React16.createElement(import_icons11.HomeIcon, { color: "disabled" }))
+      post.isHome && /* @__PURE__ */ React20.createElement(import_ui11.ListItemIcon, null, /* @__PURE__ */ React20.createElement(import_icons12.HomeIcon, { color: "disabled" }))
     )
-  ), /* @__PURE__ */ React16.createElement(PageActionsMenu, { page, ...(0, import_ui11.bindMenu)(popupState) }));
+  ), /* @__PURE__ */ React20.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 })
+  ));
 }
 
-// src/hooks/use-posts.ts
-var import_query = require("@elementor/query");
-
-// src/api/post.ts
-var import_api_fetch3 = __toESM(require("@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 (0, import_api_fetch3.default)({ path: uri });
-};
-
-// src/hooks/use-posts.ts
-var postsQueryKey = (postTypeSlug) => ["site-navigation", "posts", postTypeSlug];
-function usePosts(postTypeSlug) {
-  return (0, import_query.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
-var import_i18n8 = require("@wordpress/i18n");
-function PagesCollapsibleList({ isOpenByDefault = false }) {
-  const { data: pages, isLoading: pagesLoading } = usePosts("page");
-  if (!pages || pagesLoading) {
-    return /* @__PURE__ */ React17.createElement(import_ui12.Box, { spacing: 4, sx: { px: 6 } }, /* @__PURE__ */ React17.createElement(import_ui12.Skeleton, { variant: "text", sx: { fontSize: "2rem" } }), /* @__PURE__ */ React17.createElement(import_ui12.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(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" }));
   }
-  const label = (0, import_i18n8.__)("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(import_ui12.List, { dense: true }, /* @__PURE__ */ React22.createElement(
     CollapsibleList,
     {
       label,
-      Icon: import_icons12.PageTypeIcon,
-      isOpenByDefault
+      Icon: import_icons13.PageTypeIcon,
+      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
-var import_i18n9 = require("@wordpress/i18n");
-
-// src/components/panel/add-new-page-button.tsx
+// src/components/panel/add-new-button.tsx
+var React23 = __toESM(require("react"));
 var import_ui13 = require("@elementor/ui");
-var import_icons13 = require("@elementor/icons");
-var React18 = __toESM(require("react"));
-function AddNewPageButton() {
-  return /* @__PURE__ */ React18.createElement(
+var import_icons14 = require("@elementor/icons");
+var import_i18n12 = require("@wordpress/i18n");
+function AddNewButton() {
+  const { setEditMode } = usePostListContext();
+  return /* @__PURE__ */ React23.createElement(
     import_ui13.Button,
     {
+      size: "small",
       sx: { mt: 4, mb: 4, mr: 5 },
-      startIcon: /* @__PURE__ */ React18.createElement(import_icons13.PlusIcon, null),
-      onClick: () => null
+      startIcon: /* @__PURE__ */ React23.createElement(import_icons14.PlusIcon, null),
+      onClick: () => {
+        setEditMode({ mode: "create", details: {} });
+      }
     },
-    "Add New"
+    (0, import_i18n12.__)("Add New", "elementor")
   );
 }
 
 // src/components/panel/shell.tsx
 var Shell = () => {
-  return /* @__PURE__ */ React19.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React19.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React19.createElement(import_editor_panels.PanelHeaderTitle, null, (0, import_i18n9.__)("Pages", "elementor"))), /* @__PURE__ */ React19.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React19.createElement(
+  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(
     import_ui14.Box,
     {
       display: "flex",
       justifyContent: "flex-end",
       alignItems: "center"
     },
-    /* @__PURE__ */ React19.createElement(AddNewPageButton, null)
-  ), /* @__PURE__ */ React19.createElement(import_ui14.List, { dense: true }, /* @__PURE__ */ React19.createElement(PagesCollapsibleList, { isOpenByDefault: true }))));
+    /* @__PURE__ */ React24.createElement(AddNewButton, null)
+  ), /* @__PURE__ */ React24.createElement(PostsCollapsibleList, { isOpenByDefault: true }))));
 };
 var shell_default = Shell;
 
@@ -625,8 +896,8 @@ function useToggleButtonProps() {
   const { isOpen, isBlocked } = usePanelStatus();
   const { open, close } = usePanelActions();
   return {
-    title: (0, import_i18n10.__)("Pages", "elementor"),
-    icon: import_icons14.PagesIcon,
+    title: (0, import_i18n14.__)("Pages", "elementor"),
+    icon: import_icons15.PagesIcon,
     onClick: () => isOpen ? close() : open(),
     selected: isOpen,
     disabled: isBlocked
@@ -645,7 +916,7 @@ var { env, validateEnv } = (0, import_env.parseEnv)("@elementor/editor-site-navi
 // src/init.ts
 function init() {
   registerTopBarMenuItems();
-  if (env.is_panel_active) {
+  if (env.is_pages_panel_active) {
     (0, import_editor_panels3.registerPanel)(panel);
     registerButton();
   }