@elementor/editor-site-navigation 0.19.9 → 0.19.11

package/dist/index.mjs

@@ -60,35 +60,27 @@ function Tooltip(props) {
 }
 
 // src/hooks/use-recent-posts.ts
-import { useEffect, useState } from "react";
+import { useQuery } from "@elementor/query";
+
+// src/api/recent-posts.ts
 import apiFetch from "@wordpress/api-fetch";
-import { addQueryArgs } from "@wordpress/url";
-var endpointPath = "/elementor/v1/site-navigation/recent-posts";
-function useRecentPosts(documentId) {
-  const [recentPosts, setRecentPosts] = useState([]);
-  const [isLoading, setIsLoading] = useState(false);
-  useEffect(() => {
-    if (documentId) {
-      setIsLoading(true);
-      fetchRecentlyEditedPosts(documentId).then((posts) => {
-        setRecentPosts(posts);
-        setIsLoading(false);
-      });
-    }
-  }, [documentId]);
-  return {
-    isLoading,
-    recentPosts
-  };
-}
-async function fetchRecentlyEditedPosts(documentId) {
-  const queryParams = {
-    posts_per_page: 5,
-    post__not_in: documentId
-  };
-  return await apiFetch({
-    path: addQueryArgs(endpointPath, queryParams)
-  }).then((response) => response).catch(() => []);
+var baseUrl = "/elementor/v1/site-navigation/recent-posts";
+var NUMBER_OF_RECENT_POSTS = 6;
+var getRequest = () => {
+  const queryParams = new URLSearchParams({
+    posts_per_page: `${NUMBER_OF_RECENT_POSTS}`
+  });
+  const path = `${baseUrl}?${queryParams.toString()}`;
+  return apiFetch({ path });
+};
+
+// src/hooks/use-recent-posts.ts
+var recentPostsQueryKey = ["site-navigation", "recent-posts"];
+function useRecentPosts() {
+  return useQuery({
+    queryKey: recentPostsQueryKey,
+    queryFn: () => getRequest()
+  });
 }
 
 // src/components/top-bar/recently-edited.tsx
@@ -174,10 +166,10 @@ import * as React4 from "react";
 
 // src/hooks/use-create-page.ts
 import apiFetch2 from "@wordpress/api-fetch";
-import { useState as useState2 } from "react";
-var endpointPath2 = "/elementor/v1/site-navigation/add-new-post";
+import { useState } from "react";
+var endpointPath = "/elementor/v1/site-navigation/add-new-post";
 function useCreatePage() {
-  const [isLoading, setIsLoading] = useState2(false);
+  const [isLoading, setIsLoading] = useState(false);
   return {
     create: () => {
       setIsLoading(true);
@@ -188,7 +180,7 @@ function useCreatePage() {
 }
 async function addNewPage() {
   return await apiFetch2({
-    path: endpointPath2,
+    path: endpointPath,
     method: "POST",
     data: { post_type: "page" }
   });
@@ -227,7 +219,14 @@ function RecentlyEdited() {
   const activeDocument = useActiveDocument();
   const hostDocument = useHostDocument();
   const document2 = activeDocument && activeDocument.type.value !== "kit" ? activeDocument : hostDocument;
-  const { recentPosts } = useRecentPosts(document2?.id);
+  const { data } = useRecentPosts();
+  const getRecentPosts = () => {
+    if (!data) {
+      return [];
+    }
+    return data.filter((post) => post.id !== document2?.id).splice(0, NUMBER_OF_RECENT_POSTS - 1);
+  };
+  const recentPosts = getRecentPosts();
   const popupState = usePopupState({
     variant: "popover",
     popupId: "elementor-v2-top-bar-recently-edited"
@@ -280,24 +279,24 @@ function RecentlyEdited() {
 import { injectIntoPageIndication, toolsMenu } from "@elementor/editor-app-bar";
 
 // src/hooks/use-toggle-button-props.ts
-import { __ as __15 } from "@wordpress/i18n";
+import { __ as __16 } 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 React23 from "react";
+import * as React25 from "react";
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
-import { __ as __14 } from "@wordpress/i18n";
+import { __ as __15 } from "@wordpress/i18n";
 
 // src/components/panel/posts-list/posts-collapsible-list.tsx
-import * as React22 from "react";
+import * as React23 from "react";
 import { PageTypeIcon as PageTypeIcon2 } from "@elementor/icons";
-import { Skeleton, Box as Box3, List as List2 } from "@elementor/ui";
+import { Skeleton, Box as Box4, List as List2 } from "@elementor/ui";
 
 // src/hooks/use-posts.ts
-import { useQuery } from "@elementor/query";
+import { useQuery as useQuery2 } from "@elementor/query";
 
 // src/api/post.ts
 import apiFetch3 from "@wordpress/api-fetch";
@@ -311,7 +310,7 @@ var postTypesMap = {
     rest_base: "pages"
   }
 };
-var getRequest = (postTypeSlug) => {
+var getRequest2 = (postTypeSlug) => {
   const baseUri = `/wp/v2/${postTypesMap[postTypeSlug].rest_base}`;
   const keys = ["id", "type", "title", "link", "status"];
   const queryParams = new URLSearchParams({
@@ -362,27 +361,29 @@ var duplicateRequest = (originalPost) => {
 // src/hooks/use-posts.ts
 var postsQueryKey = (postTypeSlug) => ["site-navigation", "posts", postTypeSlug];
 function usePosts(postTypeSlug) {
-  return useQuery({
+  return useQuery2({
     queryKey: postsQueryKey(postTypeSlug),
-    queryFn: () => getRequest(postTypeSlug)
+    queryFn: () => getRequest2(postTypeSlug)
   });
 }
 
 // src/contexts/post-list-context.tsx
 import * as React6 from "react";
-import { useState as useState3, useContext, createContext } from "react";
+import { useState as useState2, useContext, createContext } from "react";
 var defaultValues = {
   type: "page",
   editMode: { mode: "none", details: {} },
   setEditMode: () => null,
-  resetEditMode: () => null
+  resetEditMode: () => null,
+  setError: () => null
 };
 var PostListContext = createContext(defaultValues);
 var PostListContextProvider = ({
   type,
+  setError,
   children
 }) => {
-  const [editMode, setEditMode] = useState3(defaultValues.editMode);
+  const [editMode, setEditMode] = useState2(defaultValues.editMode);
   const resetEditMode = () => {
     setEditMode(defaultValues.editMode);
   };
@@ -390,7 +391,8 @@ var PostListContextProvider = ({
     type,
     editMode,
     setEditMode,
-    resetEditMode
+    resetEditMode,
+    setError
   } }, children);
 };
 function usePostListContext() {
@@ -403,7 +405,7 @@ function usePostListContext() {
 
 // src/components/panel/posts-list/collapsible-list.tsx
 import * as React7 from "react";
-import { useState as useState4 } from "react";
+import { useState as useState3 } from "react";
 import { Collapse, IconButton, List, ListItem, ListItemIcon as ListItemIcon2, ListItemText as ListItemText4, styled, Divider as Divider2 } from "@elementor/ui";
 import { ChevronDownIcon as ChevronDownIcon2 } from "@elementor/icons";
 var RotateIcon = styled(ChevronDownIcon2, {
@@ -414,22 +416,38 @@ var RotateIcon = styled(ChevronDownIcon2, {
     duration: theme.transitions.duration.standard
   })
 }));
+var StyledListItemIcon = styled(ListItemIcon2)(({ theme }) => ({
+  minWidth: theme.spacing(4)
+}));
 function CollapsibleList({
   label,
   Icon,
   isOpenByDefault = false,
   children
 }) {
-  const [isOpen, setIsOpen] = useState4(isOpenByDefault);
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(ListItem, null, /* @__PURE__ */ React7.createElement(ListItemIcon2, null, /* @__PURE__ */ React7.createElement(
+  const [isOpen, setIsOpen] = useState3(isOpenByDefault);
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(ListItem, null, /* @__PURE__ */ React7.createElement(StyledListItemIcon, { sx: {
+    color: "text.secondary"
+  } }, /* @__PURE__ */ React7.createElement(
     IconButton,
     {
       onClick: () => setIsOpen((prev) => !prev),
-      sx: { color: "inherit" },
-      size: "small"
+      size: "small",
+      sx: {
+        color: "inherit"
+      }
     },
     /* @__PURE__ */ React7.createElement(RotateIcon, { fontSize: "small", isOpen })
-  )), /* @__PURE__ */ React7.createElement(ListItemIcon2, null, /* @__PURE__ */ React7.createElement(Icon, null)), /* @__PURE__ */ React7.createElement(ListItemText4, { primaryTypographyProps: { variant: "subtitle1", component: "span", sx: { fontWeight: "bold" } }, primary: label })), /* @__PURE__ */ React7.createElement(
+  )), /* @__PURE__ */ React7.createElement(
+    StyledListItemIcon,
+    {
+      size: "small",
+      sx: {
+        color: "inherit"
+      }
+    },
+    /* @__PURE__ */ React7.createElement(Icon, { fontSize: "small" })
+  ), /* @__PURE__ */ React7.createElement(ListItemText4, { primaryTypographyProps: { variant: "subtitle2", component: "span" }, primary: label })), /* @__PURE__ */ React7.createElement(
     Collapse,
     {
       in: isOpen,
@@ -478,25 +496,28 @@ function useInvalidatePosts(postTypeSlug) {
   const queryClient = useQueryClient();
   return (options = {}) => {
     const queryKey = postsQueryKey(postTypeSlug);
+    queryClient.invalidateQueries({ queryKey: recentPostsQueryKey }, options);
     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 { useState as useState4, useRef } from "react";
 import {
   Box,
   ListItem as ListItem2,
   TextField,
   IconButton as IconButton2,
-  CircularProgress as CircularProgress2
+  CircularProgress as CircularProgress2,
+  ListItemText as ListItemText5
 } from "@elementor/ui";
 import { XIcon } from "@elementor/icons";
 import { __ as __4 } from "@wordpress/i18n";
 function EditModeTemplate({ postTitle, isLoading, callback }) {
-  const [title, setTitle] = useState5(postTitle);
-  const [inputError, setInputError] = useState5("");
+  const [title, setTitle] = useState4(postTitle);
+  const [touched, setTouched] = useState4(false);
+  const [inputError, setInputError] = useState4(null);
   const closeButton = useRef();
   const onBlur = (e) => {
     if (closeButton.current === e.relatedTarget) {
@@ -508,43 +529,48 @@ function EditModeTemplate({ postTitle, isLoading, callback }) {
     e.preventDefault();
     runCallback();
   };
-  const validateInput = () => {
-    let isValid = true;
-    if (title.trim() === "") {
-      isValid = false;
-      setInputError(__4("Name is required", "elementor"));
-    }
-    return isValid;
+  const validateInput = (input) => {
+    return input.trim() !== "";
   };
   const runCallback = () => {
-    if (!validateInput()) {
+    if (!validateInput(title)) {
       return;
     }
     callback(title);
   };
-  return /* @__PURE__ */ React8.createElement(
+  const onChange = (e) => {
+    if (!touched) {
+      setTouched(true);
+    }
+    const value = e.target.value;
+    if (!validateInput(value)) {
+      setInputError(__4("Name is required", "elementor"));
+    } else {
+      setInputError(null);
+    }
+    setTitle(value);
+  };
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(
     ListItem2,
     {
-      sx: { pt: 1, pl: 0 },
       secondaryAction: /* @__PURE__ */ React8.createElement(CloseButton, { isLoading, closeButton })
     },
-    /* @__PURE__ */ React8.createElement(Box, { width: "100%", sx: { ml: 4, pr: 3 }, component: "form", onSubmit: onFormSubmit }, /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React8.createElement(Box, { width: "100%", component: "form", onSubmit: onFormSubmit }, /* @__PURE__ */ React8.createElement(
       TextField,
       {
         autoFocus: true,
         fullWidth: true,
         value: title,
-        onChange: (e) => setTitle(e.target.value),
+        onChange,
         disabled: isLoading,
         error: !!inputError,
         onBlur,
         variant: "outlined",
         color: "secondary",
-        size: "small",
-        margin: "dense"
+        size: "small"
       }
     ))
-  );
+  ), inputError && /* @__PURE__ */ React8.createElement(ListItem2, null, /* @__PURE__ */ React8.createElement(ListItemText5, { sx: { color: "error.main" } }, inputError)));
 }
 function CloseButton({ isLoading, closeButton }) {
   const { resetEditMode } = usePostListContext();
@@ -561,24 +587,58 @@ function CloseButton({ isLoading, closeButton }) {
   );
 }
 
+// src/components/panel/posts-list/list-items/list-item-rename.tsx
+import { __useActiveDocument as useActiveDocument2 } from "@elementor/editor-documents";
+
+// src/hooks/use-rename-active-document.ts
+import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
+function getV1DocumentsManager() {
+  const documentsManager = window.elementor?.documents;
+  if (!documentsManager) {
+    throw new Error("Elementor Editor V1 documents manager not found");
+  }
+  return documentsManager;
+}
+function useRenameActiveDocument() {
+  return async (title) => {
+    const currentDocument = getV1DocumentsManager().getCurrent();
+    const container = currentDocument.container;
+    await runCommand("document/elements/settings", {
+      container,
+      settings: { post_title: title }
+    });
+  };
+}
+
 // 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) {
+  const { setError } = usePostListContext();
+  const activeDocument = useActiveDocument2();
+  const rename = useRenameActiveDocument();
+  const isActive = activeDocument?.id === post.id;
+  const title = isActive ? activeDocument?.title : post.title.rendered;
+  const renamePostCallback = async (inputValue) => {
+    if (inputValue === title) {
       resetEditMode();
     }
-    updatePost.mutateAsync({
-      id: post.id,
-      title: inputValue
-    }, {
-      onSuccess: () => {
-        resetEditMode();
+    try {
+      if (isActive) {
+        await rename(inputValue);
+      } else {
+        await updatePost.mutateAsync({
+          id: post.id,
+          title: inputValue
+        });
       }
-    });
+    } catch (e) {
+      setError();
+    } finally {
+      resetEditMode();
+    }
   };
-  return /* @__PURE__ */ React9.createElement(EditModeTemplate, { postTitle: post.title.rendered, isLoading: updatePost.isPending, callback: renamePostCallback });
+  return /* @__PURE__ */ React9.createElement(EditModeTemplate, { postTitle: title, isLoading: updatePost.isPending, callback: renamePostCallback });
 }
 
 // src/components/panel/posts-list/list-items/list-item-create.tsx
@@ -589,16 +649,19 @@ function ListItemCreate() {
   const { type, resetEditMode } = usePostListContext();
   const { createPost } = usePostActions(type);
   const navigateToDocument = useNavigateToDocument3();
-  const createPostCallback = (inputValue) => {
-    createPost.mutateAsync({
-      title: inputValue,
-      status: "draft"
-    }, {
-      onSuccess: (data) => {
-        resetEditMode();
-        navigateToDocument(data.id);
-      }
-    });
+  const { setError } = usePostListContext();
+  const createPostCallback = async (inputValue) => {
+    try {
+      const { id } = await createPost.mutateAsync({
+        title: inputValue,
+        status: "draft"
+      });
+      navigateToDocument(id);
+    } catch (e) {
+      setError();
+    } finally {
+      resetEditMode();
+    }
   };
   return /* @__PURE__ */ React10.createElement(EditModeTemplate, { postTitle: __5("New Page", "elementor"), isLoading: createPost.isPending, callback: createPostCallback });
 }
@@ -611,19 +674,22 @@ function ListItemDuplicate() {
   const { type, editMode, resetEditMode } = usePostListContext();
   const navigateToDocument = useNavigateToDocument4();
   const { duplicatePost } = usePostActions(type);
+  const { setError } = usePostListContext();
   if ("duplicate" !== editMode.mode) {
     return null;
   }
-  const duplicatePostCallback = (inputValue) => {
-    duplicatePost.mutateAsync({
-      id: editMode.details.postId,
-      title: inputValue
-    }, {
-      onSuccess: (data) => {
-        resetEditMode();
-        navigateToDocument(data.post_id);
-      }
-    });
+  const duplicatePostCallback = async (inputValue) => {
+    try {
+      const { post_id: postId } = await duplicatePost.mutateAsync({
+        id: editMode.details.postId,
+        title: inputValue
+      });
+      navigateToDocument(postId);
+    } catch (e) {
+      setError();
+    } finally {
+      resetEditMode();
+    }
   };
   return /* @__PURE__ */ React11.createElement(EditModeTemplate, { postTitle: `${editMode.details.title} ${__6("copy", "elementor")}`, isLoading: duplicatePost.isPending, callback: duplicatePostCallback });
 }
@@ -634,16 +700,15 @@ import {
   bindMenu as bindMenu2,
   bindTrigger as bindTrigger2,
   Divider as Divider4,
+  IconButton as IconButton3,
   ListItem as ListItem3,
-  ListItemButton as ListItemButton2,
-  ListItemIcon as ListItemIcon4,
-  ListItemText as ListItemText6,
+  ListItemButton,
+  ListItemText as ListItemText7,
   Menu as Menu2,
-  ToggleButton,
   usePopupState as usePopupState2
 } from "@elementor/ui";
 import { DotsVerticalIcon, HomeIcon as HomeIcon2 } from "@elementor/icons";
-import { __useActiveDocument as useActiveDocument3, __useNavigateToDocument as useNavigateToDocument5 } from "@elementor/editor-documents";
+import { __useActiveDocument as useActiveDocument4, __useNavigateToDocument as useNavigateToDocument5 } from "@elementor/editor-documents";
 
 // src/components/shared/page-title-and-status.tsx
 import * as React12 from "react";
@@ -657,6 +722,7 @@ var PageStatus = ({ status }) => {
     {
       component: "span",
       variant: "body2",
+      color: "text.secondary",
       sx: {
         textTransform: "capitalize",
         fontStyle: "italic",
@@ -676,6 +742,7 @@ var PageTitle = ({ title }) => {
     {
       component: "span",
       variant: "body2",
+      color: "text.secondary",
       noWrap: true,
       sx: {
         flexBasis: "auto"
@@ -684,8 +751,8 @@ var PageTitle = ({ title }) => {
     modifiedTitle
   );
 };
-function PageTitleAndStatus({ page }) {
-  return /* @__PURE__ */ React12.createElement(Box2, { display: "flex" }, /* @__PURE__ */ React12.createElement(PageTitle, { title: page.title.rendered }), "\xA0", /* @__PURE__ */ React12.createElement(PageStatus, { status: page.status }));
+function PageTitleAndStatus({ title, status }) {
+  return /* @__PURE__ */ React12.createElement(Box2, { display: "flex" }, /* @__PURE__ */ React12.createElement(PageTitle, { title }), "\xA0", /* @__PURE__ */ React12.createElement(PageStatus, { status }));
 }
 
 // src/components/panel/actions-menu/actions/rename.tsx
@@ -696,20 +763,14 @@ import { __ as __7 } from "@wordpress/i18n";
 // src/components/panel/actions-menu/action-menu-item.tsx
 import * as React13 from "react";
 import {
-  ListItemButton,
   ListItemIcon as ListItemIcon3,
-  ListItemText as ListItemText5,
+  ListItemText as ListItemText6,
   MenuItem as MenuItem4
 } from "@elementor/ui";
-function ActionMenuItem({ title, icon: Icon, ListItemButtonProps }) {
-  return /* @__PURE__ */ React13.createElement(MenuItem4, { disableGutters: true }, /* @__PURE__ */ React13.createElement(
-    ListItemButton,
-    {
-      ...ListItemButtonProps
-    },
-    /* @__PURE__ */ React13.createElement(ListItemIcon3, null, /* @__PURE__ */ React13.createElement(Icon, null)),
-    /* @__PURE__ */ React13.createElement(ListItemText5, { primary: title })
-  ));
+function ActionMenuItem({ title, icon: Icon, MenuItemProps: MenuItemProps3 }) {
+  return /* @__PURE__ */ React13.createElement(MenuItem4, { ...MenuItemProps3 }, /* @__PURE__ */ React13.createElement(ListItemIcon3, { sx: {
+    color: "inherit"
+  } }, /* @__PURE__ */ React13.createElement(Icon, null)), /* @__PURE__ */ React13.createElement(ListItemText6, { primary: title }));
 }
 
 // src/components/panel/actions-menu/actions/rename.tsx
@@ -720,7 +781,7 @@ function Rename({ post }) {
     {
       title: __7("Rename", "elementor"),
       icon: EraseIcon,
-      ListItemButtonProps: {
+      MenuItemProps: {
         onClick: () => {
           setEditMode({
             mode: "rename",
@@ -755,7 +816,7 @@ function Duplicate({ post, popupState }) {
     {
       title: __8("Duplicate", "elementor"),
       icon: CopyIcon,
-      ListItemButtonProps: {
+      MenuItemProps: {
         onClick
       }
     }
@@ -776,18 +837,18 @@ import {
   DialogTitle,
   Divider as Divider3
 } from "@elementor/ui";
-import { useState as useState6 } from "react";
-import { __useActiveDocument as useActiveDocument2 } from "@elementor/editor-documents";
+import { useState as useState5 } from "react";
+import { __useActiveDocument as useActiveDocument3 } from "@elementor/editor-documents";
 function Delete({ post }) {
-  const [isDialogOpen, setIsDialogOpen] = useState6(false);
-  const activeDocument = useActiveDocument2();
+  const [isDialogOpen, setIsDialogOpen] = useState5(false);
+  const activeDocument = useActiveDocument3();
   const isPostActive = activeDocument?.id === post.id;
   return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
     ActionMenuItem,
     {
       title: __9("Delete", "elementor"),
       icon: TrashIcon,
-      ListItemButtonProps: {
+      MenuItemProps: {
         disabled: post.isHome || isPostActive,
         onClick: () => setIsDialogOpen(true),
         sx: { "&:hover": { color: "error.main" } }
@@ -798,9 +859,15 @@ function Delete({ post }) {
 function DeleteDialog({ post, setIsDialogOpen }) {
   const { type } = usePostListContext();
   const { deletePost } = usePostActions(type);
+  const { setError } = usePostListContext();
   const dialogTitle = sprintf(__9('Delete "%s"?', "elementor"), post.title.rendered);
   const deletePage = async () => {
-    await deletePost.mutateAsync(post.id);
+    try {
+      await deletePost.mutateAsync(post.id);
+    } catch (e) {
+      setError();
+      setIsDialogOpen(false);
+    }
   };
   const handleCancel = () => {
     if (deletePost.isPending) {
@@ -834,7 +901,7 @@ function View({ post }) {
     {
       title,
       icon: EyeIcon,
-      ListItemButtonProps: {
+      MenuItemProps: {
         onClick: () => window.open(post.link, "_blank")
       }
     }
@@ -869,10 +936,10 @@ var updateSettings = (settings) => {
 };
 
 // src/hooks/use-homepage.ts
-import { useQuery as useQuery2 } from "@elementor/query";
+import { useQuery as useQuery3 } from "@elementor/query";
 var settingsQueryKey = () => ["site-navigation", "homepage"];
 function useHomepage() {
-  return useQuery2({
+  return useQuery3({
     queryKey: settingsQueryKey(),
     queryFn: () => getSettings()
   });
@@ -898,17 +965,24 @@ function useInvalidateSettings() {
 
 // src/components/panel/actions-menu/actions/set-home.tsx
 import { CircularProgress as CircularProgress4 } from "@elementor/ui";
-function SetHome({ post }) {
+function SetHome({ post, closeMenu }) {
   const { updateSettingsMutation } = useHomepageActions();
-  const handleClick = () => {
-    updateSettingsMutation.mutateAsync({ show_on_front: "page", page_on_front: post.id });
+  const { setError } = usePostListContext();
+  const handleClick = async () => {
+    try {
+      await updateSettingsMutation.mutateAsync({ show_on_front: "page", page_on_front: post.id });
+    } catch (error) {
+      setError();
+    } finally {
+      closeMenu();
+    }
   };
   return /* @__PURE__ */ React18.createElement(
     ActionMenuItem,
     {
       title: __11("Set as homepage", "elementor"),
       icon: !updateSettingsMutation.isPending ? HomeIcon : CircularProgress4,
-      ListItemButtonProps: {
+      MenuItemProps: {
         disabled: !!post.isHome || post.status !== "publish" || updateSettingsMutation.isPending,
         onClick: handleClick
       }
@@ -919,7 +993,7 @@ function SetHome({ post }) {
 // src/components/panel/posts-list/list-items/list-item-view.tsx
 import { __ as __12 } from "@wordpress/i18n";
 function ListItemView({ post }) {
-  const activeDocument = useActiveDocument3();
+  const activeDocument = useActiveDocument4();
   const navigateToDocument = useNavigateToDocument5();
   const popupState = usePopupState2({
     variant: "popover",
@@ -927,24 +1001,24 @@ function ListItemView({ post }) {
     disableAutoFocus: true
   });
   const isActive = activeDocument?.id === post.id;
+  const status = isActive ? activeDocument?.status.value : post.status;
+  const title = isActive ? activeDocument?.title : post.title.rendered;
   return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
     ListItem3,
     {
       disablePadding: true,
       secondaryAction: /* @__PURE__ */ React19.createElement(
-        ToggleButton,
+        IconButton3,
         {
           value: true,
-          color: "secondary",
           size: "small",
-          selected: popupState.isOpen,
           ...bindTrigger2(popupState)
         },
         /* @__PURE__ */ React19.createElement(DotsVerticalIcon, { fontSize: "small" })
       )
     },
     /* @__PURE__ */ React19.createElement(
-      ListItemButton2,
+      ListItemButton,
       {
         selected: isActive,
         onClick: () => {
@@ -952,18 +1026,16 @@ function ListItemView({ post }) {
             navigateToDocument(post.id);
           }
         },
-        dense: true,
-        disableGutters: true
+        dense: true
       },
-      /* @__PURE__ */ React19.createElement(ListItemIcon4, null),
       /* @__PURE__ */ React19.createElement(
-        ListItemText6,
+        ListItemText7,
         {
           disableTypography: true
         },
-        /* @__PURE__ */ React19.createElement(PageTitleAndStatus, { page: post })
+        /* @__PURE__ */ React19.createElement(PageTitleAndStatus, { title, status })
       ),
-      post.isHome && /* @__PURE__ */ React19.createElement(ListItemIcon4, null, /* @__PURE__ */ React19.createElement(HomeIcon2, { titleAccess: __12("Homepage", "elementor"), color: "disabled" }))
+      post.isHome && /* @__PURE__ */ React19.createElement(HomeIcon2, { titleAccess: __12("Homepage", "elementor"), color: "disabled" })
     )
   ), /* @__PURE__ */ React19.createElement(
     Menu2,
@@ -977,7 +1049,7 @@ function ListItemView({ post }) {
     /* @__PURE__ */ React19.createElement(Delete, { post }),
     /* @__PURE__ */ React19.createElement(View, { post }),
     /* @__PURE__ */ React19.createElement(Divider4, null),
-    /* @__PURE__ */ React19.createElement(SetHome, { post })
+    /* @__PURE__ */ React19.createElement(SetHome, { post, closeMenu: () => popupState.close() })
   ));
 }
 
@@ -1010,61 +1082,135 @@ function AddNewButton() {
     Button3,
     {
       size: "small",
-      sx: { mt: 4, mb: 4, mr: 5 },
       startIcon: /* @__PURE__ */ React21.createElement(PlusIcon2, null),
       onClick: () => {
         setEditMode({ mode: "create", details: {} });
+      },
+      sx: {
+        px: 1.5
       }
     },
     __13("Add New", "elementor")
   );
 }
 
+// src/components/panel/posts-list/error-state.tsx
+import { Error404TemplateIcon } from "@elementor/icons";
+import { Box as Box3, Link, Typography as Typography3 } from "@elementor/ui";
+import { __ as __14 } from "@wordpress/i18n";
+import * as React22 from "react";
+function ErrorState() {
+  return /* @__PURE__ */ React22.createElement(Box3, { sx: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    pt: "40px",
+    gap: "16px"
+  } }, /* @__PURE__ */ React22.createElement(Error404TemplateIcon, null), /* @__PURE__ */ React22.createElement(Box3, { sx: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px"
+  } }, /* @__PURE__ */ React22.createElement(Typography3, { variant: "body1", color: "text.primary" }, __14("We couldn\u2019t display your pages.", "elementor")), /* @__PURE__ */ React22.createElement(Box3, null, /* @__PURE__ */ React22.createElement(Typography3, { variant: "body2", color: "text.primary", sx: { textAlign: "center" } }, __14("It\u2019s probably a temporary issue.", "elementor")), /* @__PURE__ */ React22.createElement(Typography3, { variant: "body2", color: "text.primary", sx: { textAlign: "center" } }, __14("If the problem persists,", "elementor"), " ", /* @__PURE__ */ React22.createElement(Link, { target: "_blank", href: "https://go.elementor.com/wp-editor-support-open-ticket/" }, "Notify support")))));
+}
+
 // src/components/panel/posts-list/posts-collapsible-list.tsx
 function PostsCollapsibleList({ isOpenByDefault = false }) {
   const { type, editMode } = usePostListContext();
-  const { data: posts, isLoading: postsLoading } = usePosts(type);
+  const { data: posts, isLoading: postsLoading, isError: postsError } = usePosts(type);
   const { data: homepageSettings } = useHomepage();
+  if (postsError) {
+    return /* @__PURE__ */ React23.createElement(ErrorState, null);
+  }
   if (!posts || postsLoading) {
-    return /* @__PURE__ */ React22.createElement(Box3, { sx: { px: 5 } }, /* @__PURE__ */ React22.createElement(
-      Box3,
+    return /* @__PURE__ */ React23.createElement(Box4, { sx: { px: 5 } }, /* @__PURE__ */ React23.createElement(
+      Box4,
       {
         display: "flex",
         justifyContent: "flex-end",
         alignItems: "center"
       },
-      /* @__PURE__ */ React22.createElement(Skeleton, { sx: { my: 4 }, animation: "wave", variant: "rounded", width: "110px", height: "28px" })
-    ), /* @__PURE__ */ React22.createElement(Box3, null, /* @__PURE__ */ React22.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "100%", height: "24px" }), /* @__PURE__ */ React22.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" }), /* @__PURE__ */ React22.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" }), /* @__PURE__ */ React22.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" })));
+      /* @__PURE__ */ React23.createElement(Skeleton, { sx: { my: 4 }, animation: "wave", variant: "rounded", width: "110px", height: "28px" })
+    ), /* @__PURE__ */ React23.createElement(Box4, null, /* @__PURE__ */ React23.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "100%", height: "24px" }), /* @__PURE__ */ React23.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" }), /* @__PURE__ */ React23.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" }), /* @__PURE__ */ React23.createElement(Skeleton, { sx: { my: 3 }, animation: "wave", variant: "rounded", width: "70%", height: "24px" })));
   }
   const label = `${postTypesMap[type].labels.plural_name} (${posts.length.toString()})`;
   const isHomepageSet = homepageSettings?.show_on_front === "page" && !!homepageSettings?.page_on_front;
   const homepageId = isHomepageSet ? homepageSettings.page_on_front : null;
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(
-    Box3,
+  const mappedPosts = posts.map((post) => {
+    if (post.id === homepageId) {
+      return { ...post, isHome: true };
+    }
+    return post;
+  });
+  const sortedPosts = mappedPosts.sort((a, b) => {
+    if (a.id === homepageId) {
+      return -1;
+    }
+    if (b.id === homepageId) {
+      return 1;
+    }
+    return 0;
+  });
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(
+    Box4,
     {
       display: "flex",
       justifyContent: "flex-end",
-      alignItems: "center"
+      alignItems: "center",
+      sx: {
+        py: 1,
+        px: 2
+      }
     },
-    /* @__PURE__ */ React22.createElement(AddNewButton, null)
-  ), /* @__PURE__ */ React22.createElement(List2, { dense: true }, /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React23.createElement(AddNewButton, null)
+  ), /* @__PURE__ */ React23.createElement(List2, { dense: true }, /* @__PURE__ */ React23.createElement(
     CollapsibleList,
     {
       label,
       Icon: PageTypeIcon2,
       isOpenByDefault: isOpenByDefault || false
     },
-    posts.map((post) => {
-      post = { ...post, isHome: post.id === homepageId };
-      return /* @__PURE__ */ React22.createElement(PostListItem2, { key: post.id, post });
+    sortedPosts.map((post) => {
+      return /* @__PURE__ */ React23.createElement(PostListItem2, { key: post.id, post });
     }),
-    ["duplicate", "create"].includes(editMode.mode) && /* @__PURE__ */ React22.createElement(PostListItem2, null)
+    ["duplicate", "create"].includes(editMode.mode) && /* @__PURE__ */ React23.createElement(PostListItem2, null)
   )));
 }
 
+// src/components/panel/error-snackbar.tsx
+import { Snackbar, Alert, Typography as Typography4 } from "@elementor/ui";
+import * as React24 from "react";
+var ErrorSnackbar = ({ open, onClose }) => {
+  return /* @__PURE__ */ React24.createElement(
+    Snackbar,
+    {
+      open,
+      onClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      }
+    },
+    /* @__PURE__ */ React24.createElement(Alert, { onClose, severity: "error", sx: { width: "100%" } }, /* @__PURE__ */ React24.createElement(
+      Typography4,
+      {
+        component: "span",
+        sx: {
+          fontWeight: "bold"
+        }
+      },
+      "We couldn\u2019t complete the action."
+    ), " ", "Please try again")
+  );
+};
+var error_snackbar_default = ErrorSnackbar;
+
 // src/components/panel/shell.tsx
 var Shell = () => {
-  return /* @__PURE__ */ React23.createElement(Panel, null, /* @__PURE__ */ React23.createElement(PanelHeader, null, /* @__PURE__ */ React23.createElement(PanelHeaderTitle, null, __14("Pages", "elementor"))), /* @__PURE__ */ React23.createElement(PanelBody, null, /* @__PURE__ */ React23.createElement(PostListContextProvider, { type: "page" }, /* @__PURE__ */ React23.createElement(PostsCollapsibleList, { isOpenByDefault: true }))));
+  const [isErrorSnackbarOpen, setIsErrorSnackbarOpen] = React25.useState(false);
+  return /* @__PURE__ */ React25.createElement(Panel, null, /* @__PURE__ */ React25.createElement(PanelHeader, null, /* @__PURE__ */ React25.createElement(PanelHeaderTitle, null, __15("Pages", "elementor"))), /* @__PURE__ */ React25.createElement(PanelBody, null, /* @__PURE__ */ React25.createElement(PostListContextProvider, { type: "page", setError: () => setIsErrorSnackbarOpen(true) }, /* @__PURE__ */ React25.createElement(PostsCollapsibleList, { isOpenByDefault: true })), /* @__PURE__ */ React25.createElement(error_snackbar_default, { open: isErrorSnackbarOpen, onClose: () => setIsErrorSnackbarOpen(false) })));
 };
 var shell_default = Shell;
 
@@ -1083,7 +1229,7 @@ function useToggleButtonProps() {
   const { isOpen, isBlocked } = usePanelStatus();
   const { open, close } = usePanelActions();
   return {
-    title: __15("Pages", "elementor"),
+    title: __16("Pages", "elementor"),
     icon: PagesIcon,
     onClick: () => isOpen ? close() : open(),
     selected: isOpen,