@elementor/editor-site-navigation 0.6.2 → 0.8.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.8.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.7.0...@elementor/editor-site-navigation@0.8.0) (2023-06-25)
+
+
+### Features
+
+* **site-navigation:** pages navigation panel UI [ED-10871] ([#51](https://github.com/elementor/elementor-packages/issues/51)) ([594427c](https://github.com/elementor/elementor-packages/commit/594427c3c296fe664577319bba29bf711f6bbdde))
+
+
+
+
+
+# [0.7.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.6.2...@elementor/editor-site-navigation@0.7.0) (2023-06-25)
+
+
+### Features
+
+* **api:** add PostsData class for managing post data and API interactions [ED-11021] ([#57](https://github.com/elementor/elementor-packages/issues/57)) ([a7b93ac](https://github.com/elementor/elementor-packages/commit/a7b93acfc00076f9452cf86f04670412c42b5773))
+
+
+
+
+
 ## [0.6.2](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.6.1...@elementor/editor-site-navigation@0.6.2) (2023-06-13)
 
 **Note:** Version bump only for package @elementor/editor-site-navigation

package/README.md

@@ -3,3 +3,51 @@
 > **Warning**
 > 
 > This package is under development and not ready for production use.
+
+## Code examples
+
+**Get all pages and create a new one:**
+
+```
+import * as React from 'react';
+import { useEffect } from 'react';
+import { usePosts } from './use-posts';
+
+const PageList = () => {
+	const { getPosts: getPages, createPost: createPage, isLoading, posts } = usePosts( 'page' );
+
+	useEffect( () => {
+		getPages();
+	}, [ getPages ] );
+
+	const createNewPage = () => {
+		const newPage = {
+			title: 'New Page',
+			content: 'This is a demo page',
+			status: 'publish',
+		};
+
+		createPage( newPage );
+	};
+
+	if ( isLoading ) {
+		return <div>Loading...</div>;
+	}
+
+	return (
+		<div>
+			<h1>Pages</h1>
+			<button onClick={ createNewPage }>Create New Page</button>
+			<ul>
+				{
+					posts.map( ( page ) => (
+						<li key={ page.id }>{ page.title }</li>
+					) )
+				}
+			</ul>
+		</div>
+	);
+};
+
+export default PageList;
+```

package/dist/index.js

@@ -248,8 +248,340 @@ function RecentlyEdited() {
 
 // src/init.ts
 var import_editor_app_bar = require("@elementor/editor-app-bar");
+var import_editor = require("@elementor/editor");
+
+// src/components/panel/shell.tsx
+var React18 = __toESM(require("react"));
+var import_ui12 = require("@elementor/ui");
+var import_icons13 = require("@elementor/icons");
+
+// src/components/panel/pages-list/pages-collapsible-list.tsx
+var React17 = __toESM(require("react"));
+
+// src/components/panel/pages-list/collapsible-list.tsx
+var React6 = __toESM(require("react"));
+var import_react4 = require("react");
+var import_ui6 = require("@elementor/ui");
+var import_icons5 = require("@elementor/icons");
+var RotateIcon = (0, import_ui6.styled)(import_icons5.ChevronDownIcon, {
+  shouldForwardProp: (prop) => prop !== "isOpen"
+})(({ theme, isOpen }) => ({
+  transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)",
+  transition: theme.transitions.create("transform", {
+    duration: theme.transitions.duration.standard
+  })
+}));
+function CollapsibleList({
+  label,
+  Icon,
+  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(
+    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(
+    import_ui6.Collapse,
+    {
+      in: isOpen,
+      timeout: "auto",
+      unmountOnExit: true
+    },
+    /* @__PURE__ */ React6.createElement(import_ui6.List, { dense: true }, children)
+  ));
+}
+
+// src/components/panel/pages-list/pages-collapsible-list.tsx
+var import_icons12 = require("@elementor/icons");
+
+// src/components/panel/pages-list/page-list-item.tsx
+var React16 = __toESM(require("react"));
+var import_ui11 = require("@elementor/ui");
+var import_icons11 = 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 PageStatus = ({ status }) => {
+  if ("publish" === status) {
+    return null;
+  }
+  return /* @__PURE__ */ React7.createElement(
+    import_ui7.Typography,
+    {
+      component: "span",
+      variant: "body1",
+      sx: {
+        textTransform: "capitalize",
+        fontStyle: "italic",
+        whiteSpace: "nowrap",
+        flexBasis: "content"
+      }
+    },
+    "(",
+    status,
+    ")"
+  );
+};
+var PageTitle = ({ title }) => {
+  const modifiedTitle = useReverseHtmlEntities(title);
+  return /* @__PURE__ */ React7.createElement(
+    import_ui7.Typography,
+    {
+      component: "span",
+      variant: "body1",
+      noWrap: true,
+      sx: {
+        flexBasis: "auto"
+      }
+    },
+    modifiedTitle
+  );
+};
+function PageTitleAndStatus({ page }) {
+  return /* @__PURE__ */ React7.createElement(import_ui7.Box, { display: "flex" }, /* @__PURE__ */ React7.createElement(PageTitle, { title: page.title }), "\xA0", /* @__PURE__ */ React7.createElement(PageStatus, { status: page.status }));
+}
+
+// src/components/panel/actions-menu/page-actions-menu.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");
+
+// src/components/panel/actions-menu/action-menu-item.tsx
+var React9 = __toESM(require("react"));
+
+// src/components/panel/actions-menu/action-list-item.tsx
+var React8 = __toESM(require("react"));
+var import_ui8 = require("@elementor/ui");
+function ActionListItem({ title, icon: Icon, disabled, onClick }) {
+  return /* @__PURE__ */ React8.createElement(
+    import_ui8.ListItemButton,
+    {
+      disabled,
+      onClick
+    },
+    /* @__PURE__ */ React8.createElement(import_ui8.ListItemIcon, null, /* @__PURE__ */ React8.createElement(Icon, null)),
+    /* @__PURE__ */ React8.createElement(import_ui8.ListItemText, null, title)
+  );
+}
+
+// src/components/panel/actions-menu/action-menu-item.tsx
+var import_ui9 = require("@elementor/ui");
+function ActionMenuItem(props) {
+  return /* @__PURE__ */ React9.createElement(import_ui9.MenuItem, { disableGutters: true }, /* @__PURE__ */ React9.createElement(ActionListItem, { ...props }));
+}
+
+// src/components/panel/pages-actions/rename.tsx
+function Rename() {
+  return /* @__PURE__ */ React10.createElement(
+    ActionMenuItem,
+    {
+      title: (0, import_i18n3.__)("Rename", "elementor"),
+      icon: import_icons6.EraseIcon,
+      onClick: () => null
+    }
+  );
+}
+
+// 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(
+    ActionMenuItem,
+    {
+      title: (0, import_i18n4.__)("Duplicate", "elementor"),
+      icon: import_icons7.CopyIcon,
+      onClick: () => null
+    }
+  );
+}
+
+// src/components/panel/pages-actions/delete.tsx
+var React12 = __toESM(require("react"));
+var import_icons8 = require("@elementor/icons");
+var import_editor_documents4 = require("@elementor/editor-documents");
+var import_i18n5 = require("@wordpress/i18n");
+function Delete({ page }) {
+  const activeDocument = (0, import_editor_documents4.useActiveDocument)();
+  const isActive = activeDocument?.id === page.id;
+  return /* @__PURE__ */ React12.createElement(
+    ActionMenuItem,
+    {
+      title: (0, import_i18n5.__)("Delete", "elementor"),
+      icon: import_icons8.TrashIcon,
+      disabled: page.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(
+    ActionMenuItem,
+    {
+      title: (0, import_i18n6.__)("View Page", "elementor"),
+      icon: import_icons9.EyeIcon,
+      onClick: () => null
+    }
+  );
+}
+
+// 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(
+    ActionMenuItem,
+    {
+      title: (0, import_i18n7.__)("Set as homepage", "elementor"),
+      icon: import_icons10.HomeIcon,
+      disabled: !!page.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 }) {
+  const popupState = (0, import_ui11.usePopupState)({
+    variant: "popover",
+    popupId: "page-actions"
+  });
+  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(
+    import_ui11.ListItem,
+    {
+      disablePadding: true,
+      secondaryAction: /* @__PURE__ */ React16.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__ */ React16.createElement(
+      import_ui11.ListItemButton,
+      {
+        selected: isActive,
+        onClick: () => navigateToDocument(page.id),
+        dense: true
+      },
+      /* @__PURE__ */ React16.createElement(import_ui11.ListItemIcon, null),
+      /* @__PURE__ */ React16.createElement(
+        import_ui11.ListItemText,
+        {
+          disableTypography: true
+        },
+        /* @__PURE__ */ React16.createElement(PageTitleAndStatus, { page })
+      ),
+      page.isHome && /* @__PURE__ */ React16.createElement(import_ui11.ListItemIcon, null, /* @__PURE__ */ React16.createElement(import_icons11.HomeIcon, { color: "disabled" }))
+    )
+  ), /* @__PURE__ */ React16.createElement(PageActionsMenu, { page, ...(0, import_ui11.bindMenu)(popupState) }));
+}
+
+// src/components/panel/pages-list/pages-collapsible-list.tsx
+function PagesCollapsibleList({ pages, isOpenByDefault = false }) {
+  const label = `Pages (${pages.length})`;
+  return /* @__PURE__ */ React17.createElement(
+    CollapsibleList,
+    {
+      label,
+      Icon: import_icons12.PageTypeIcon,
+      isOpenByDefault
+    },
+    pages.map((page) => /* @__PURE__ */ React17.createElement(PageListItem, { key: page.id, page }))
+  );
+}
+
+// src/components/panel/shell.tsx
+var mockPages = [
+  {
+    id: 1,
+    type: "page",
+    title: "This is a very long title that somebody wrote, a very very long line",
+    status: "pending approval"
+  },
+  { id: 2, type: "page", title: "About", status: "publish" },
+  { id: 3, type: "page", title: "Services", status: "publish", isHome: true },
+  { id: 4, type: "page", title: "Contact", status: "draft" },
+  { id: 5, type: "page", title: "FAQ", status: "publish" }
+];
+var Shell = () => {
+  return /* @__PURE__ */ React18.createElement(import_ui12.ThemeProvider, { colorScheme: "light" }, /* @__PURE__ */ React18.createElement(import_ui12.Box, { sx: { width: "100%", maxWidth: 360 } }, /* @__PURE__ */ React18.createElement(import_ui12.Paper, null, /* @__PURE__ */ React18.createElement(
+    import_ui12.Grid,
+    {
+      container: true,
+      justifyContent: "center",
+      alignItems: "center",
+      sx: { height: 51 }
+    },
+    /* @__PURE__ */ React18.createElement(import_ui12.Typography, { variant: "h6" }, "Pages")
+  ), /* @__PURE__ */ React18.createElement(import_ui12.Divider, null), /* @__PURE__ */ React18.createElement(
+    import_ui12.Box,
+    {
+      display: "flex",
+      justifyContent: "flex-end",
+      alignItems: "center"
+    },
+    /* @__PURE__ */ React18.createElement(
+      import_ui12.Button,
+      {
+        sx: { mt: 4, mb: 4, mr: 5 },
+        startIcon: /* @__PURE__ */ React18.createElement(import_icons13.PlusIcon, null)
+      },
+      "Add New"
+    )
+  ), /* @__PURE__ */ React18.createElement(import_ui12.Box, { sx: { width: "100%", maxWidth: 360 } }, /* @__PURE__ */ React18.createElement(import_ui12.List, { dense: true }, /* @__PURE__ */ React18.createElement(PagesCollapsibleList, { pages: mockPages, isOpenByDefault: true }))), /* @__PURE__ */ React18.createElement(import_ui12.Divider, null))));
+};
+var shell_default = Shell;
+
+// src/init.ts
 function init() {
   registerTopBarMenuItems();
+  registerPanel();
 }
 function registerTopBarMenuItems() {
   (0, import_editor_app_bar.injectIntoPageIndication)({
@@ -257,6 +589,12 @@ function registerTopBarMenuItems() {
     filler: RecentlyEdited
   });
 }
+function registerPanel() {
+  (0, import_editor.injectIntoTop)({
+    id: "navigation-panel",
+    filler: shell_default
+  });
+}
 
 // src/index.ts
 init();