@elementor/editor-site-navigation 0.7.0 → 0.8.0

package/dist/index.mjs

@@ -230,8 +230,349 @@ function RecentlyEdited() {
 
 // src/init.ts
 import { injectIntoPageIndication } from "@elementor/editor-app-bar";
+import { injectIntoTop } from "@elementor/editor";
+
+// src/components/panel/shell.tsx
+import * as React18 from "react";
+import { Box as Box3, Button as Button2, Divider as Divider3, Grid, List as List2, Paper, ThemeProvider, Typography as Typography4 } from "@elementor/ui";
+import { PlusIcon as PlusIcon2 } from "@elementor/icons";
+
+// src/components/panel/pages-list/pages-collapsible-list.tsx
+import * as React17 from "react";
+
+// src/components/panel/pages-list/collapsible-list.tsx
+import * as React6 from "react";
+import { useState as useState3 } 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, {
+  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] = useState3(isOpenByDefault);
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(ListItem, { disableGutters: true }, /* @__PURE__ */ React6.createElement(ListItemIcon2, null, /* @__PURE__ */ React6.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(
+    Collapse,
+    {
+      in: isOpen,
+      timeout: "auto",
+      unmountOnExit: true
+    },
+    /* @__PURE__ */ React6.createElement(List, { dense: true }, children)
+  ));
+}
+
+// src/components/panel/pages-list/pages-collapsible-list.tsx
+import { PageTypeIcon as PageTypeIcon2 } from "@elementor/icons";
+
+// src/components/panel/pages-list/page-list-item.tsx
+import * as React16 from "react";
+import {
+  bindMenu as bindMenu2,
+  bindTrigger as bindTrigger2,
+  ListItem as ListItem2,
+  ListItemButton as ListItemButton2,
+  ListItemIcon as ListItemIcon4,
+  ListItemText as ListItemText3,
+  ToggleButton,
+  usePopupState as usePopupState2
+} from "@elementor/ui";
+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";
+var PageStatus = ({ status }) => {
+  if ("publish" === status) {
+    return null;
+  }
+  return /* @__PURE__ */ React7.createElement(
+    Typography3,
+    {
+      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(
+    Typography3,
+    {
+      component: "span",
+      variant: "body1",
+      noWrap: true,
+      sx: {
+        flexBasis: "auto"
+      }
+    },
+    modifiedTitle
+  );
+};
+function PageTitleAndStatus({ page }) {
+  return /* @__PURE__ */ React7.createElement(Box2, { 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
+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";
+
+// src/components/panel/actions-menu/action-menu-item.tsx
+import * as React9 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";
+function ActionListItem({ title, icon: Icon, disabled, onClick }) {
+  return /* @__PURE__ */ React8.createElement(
+    ListItemButton,
+    {
+      disabled,
+      onClick
+    },
+    /* @__PURE__ */ React8.createElement(ListItemIcon3, null, /* @__PURE__ */ React8.createElement(Icon, null)),
+    /* @__PURE__ */ React8.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 }));
+}
+
+// src/components/panel/pages-actions/rename.tsx
+function Rename() {
+  return /* @__PURE__ */ React10.createElement(
+    ActionMenuItem,
+    {
+      title: __3("Rename", "elementor"),
+      icon: EraseIcon,
+      onClick: () => null
+    }
+  );
+}
+
+// src/components/panel/pages-actions/duplicate.tsx
+import * as React11 from "react";
+import { __ as __4 } from "@wordpress/i18n";
+import { CopyIcon } from "@elementor/icons";
+function Duplicate() {
+  return /* @__PURE__ */ React11.createElement(
+    ActionMenuItem,
+    {
+      title: __4("Duplicate", "elementor"),
+      icon: CopyIcon,
+      onClick: () => null
+    }
+  );
+}
+
+// src/components/panel/pages-actions/delete.tsx
+import * as React12 from "react";
+import { TrashIcon } from "@elementor/icons";
+import { useActiveDocument as useActiveDocument2 } from "@elementor/editor-documents";
+import { __ as __5 } from "@wordpress/i18n";
+function Delete({ page }) {
+  const activeDocument = useActiveDocument2();
+  const isActive = activeDocument?.id === page.id;
+  return /* @__PURE__ */ React12.createElement(
+    ActionMenuItem,
+    {
+      title: __5("Delete", "elementor"),
+      icon: TrashIcon,
+      disabled: page.isHome || isActive,
+      onClick: () => null
+    }
+  );
+}
+
+// src/components/panel/pages-actions/view.tsx
+import * as React13 from "react";
+import { EyeIcon } from "@elementor/icons";
+import { __ as __6 } from "@wordpress/i18n";
+function View() {
+  return /* @__PURE__ */ React13.createElement(
+    ActionMenuItem,
+    {
+      title: __6("View Page", "elementor"),
+      icon: EyeIcon,
+      onClick: () => null
+    }
+  );
+}
+
+// src/components/panel/pages-actions/set-home.tsx
+import * as React14 from "react";
+import { HomeIcon } from "@elementor/icons";
+import { __ as __7 } from "@wordpress/i18n";
+function SetHome({ page }) {
+  return /* @__PURE__ */ React14.createElement(
+    ActionMenuItem,
+    {
+      title: __7("Set as homepage", "elementor"),
+      icon: HomeIcon,
+      disabled: !!page.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 }) {
+  const popupState = usePopupState2({
+    variant: "popover",
+    popupId: "page-actions"
+  });
+  const activeDocument = useActiveDocument3();
+  const navigateToDocument = useNavigateToDocument3();
+  const isActive = activeDocument?.id === page.id;
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
+    ListItem2,
+    {
+      disablePadding: true,
+      secondaryAction: /* @__PURE__ */ React16.createElement(
+        ToggleButton,
+        {
+          value: true,
+          color: "secondary",
+          size: "small",
+          selected: popupState.isOpen,
+          ...bindTrigger2(popupState)
+        },
+        /* @__PURE__ */ React16.createElement(DotsVerticalIcon, { fontSize: "small" })
+      )
+    },
+    /* @__PURE__ */ React16.createElement(
+      ListItemButton2,
+      {
+        selected: isActive,
+        onClick: () => navigateToDocument(page.id),
+        dense: true
+      },
+      /* @__PURE__ */ React16.createElement(ListItemIcon4, null),
+      /* @__PURE__ */ React16.createElement(
+        ListItemText3,
+        {
+          disableTypography: true
+        },
+        /* @__PURE__ */ React16.createElement(PageTitleAndStatus, { page })
+      ),
+      page.isHome && /* @__PURE__ */ React16.createElement(ListItemIcon4, null, /* @__PURE__ */ React16.createElement(HomeIcon2, { color: "disabled" }))
+    )
+  ), /* @__PURE__ */ React16.createElement(PageActionsMenu, { page, ...bindMenu2(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: PageTypeIcon2,
+      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(ThemeProvider, { colorScheme: "light" }, /* @__PURE__ */ React18.createElement(Box3, { sx: { width: "100%", maxWidth: 360 } }, /* @__PURE__ */ React18.createElement(Paper, null, /* @__PURE__ */ React18.createElement(
+    Grid,
+    {
+      container: true,
+      justifyContent: "center",
+      alignItems: "center",
+      sx: { height: 51 }
+    },
+    /* @__PURE__ */ React18.createElement(Typography4, { variant: "h6" }, "Pages")
+  ), /* @__PURE__ */ React18.createElement(Divider3, null), /* @__PURE__ */ React18.createElement(
+    Box3,
+    {
+      display: "flex",
+      justifyContent: "flex-end",
+      alignItems: "center"
+    },
+    /* @__PURE__ */ React18.createElement(
+      Button2,
+      {
+        sx: { mt: 4, mb: 4, mr: 5 },
+        startIcon: /* @__PURE__ */ React18.createElement(PlusIcon2, null)
+      },
+      "Add New"
+    )
+  ), /* @__PURE__ */ React18.createElement(Box3, { sx: { width: "100%", maxWidth: 360 } }, /* @__PURE__ */ React18.createElement(List2, { dense: true }, /* @__PURE__ */ React18.createElement(PagesCollapsibleList, { pages: mockPages, isOpenByDefault: true }))), /* @__PURE__ */ React18.createElement(Divider3, null))));
+};
+var shell_default = Shell;
+
+// src/init.ts
 function init() {
   registerTopBarMenuItems();
+  registerPanel();
 }
 function registerTopBarMenuItems() {
   injectIntoPageIndication({
@@ -239,6 +580,12 @@ function registerTopBarMenuItems() {
     filler: RecentlyEdited
   });
 }
+function registerPanel() {
+  injectIntoTop({
+    id: "navigation-panel",
+    filler: shell_default
+  });
+}
 
 // src/index.ts
 init();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/editor-site-navigation",
-	"version": "0.7.0",
+	"version": "0.8.0",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -32,10 +32,11 @@
 		"dev": "tsup --config=../../tsup.dev.ts"
 	},
 	"dependencies": {
-		"@elementor/editor-app-bar": "^0.6.2",
+		"@elementor/editor": "^0.6.1",
+		"@elementor/editor-app-bar": "^0.6.3",
 		"@elementor/editor-documents": "^0.8.2",
-		"@elementor/icons": "^0.4.0",
-		"@elementor/ui": "^1.4.50",
+		"@elementor/icons": "^0.5.0",
+		"@elementor/ui": "^1.4.53",
 		"@wordpress/api-fetch": "^6.27.0",
 		"@wordpress/i18n": "^4.31.0",
 		"@wordpress/url": "^3.31.0"
@@ -46,5 +47,5 @@
 	"elementor": {
 		"type": "extension"
 	},
-	"gitHead": "ad9032e095915dbef0f8543d83f73b9288adc8ad"
+	"gitHead": "d15192c0e60703e9831f7813d0a32d5943fe6c28"
 }

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

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

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import ActionListItem, { Props as ActionListItemProps } from './action-list-item';
+import { MenuItem } from '@elementor/ui';
+
+export default function ActionMenuItem( props: ActionListItemProps ) {
+	return (
+		<MenuItem disableGutters>
+			<ActionListItem { ...props } />
+		</MenuItem>
+	);
+}

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Divider, Menu, MenuProps } from '@elementor/ui';
+import Rename from '../pages-actions/rename';
+import Duplicate from '../pages-actions/duplicate';
+import Delete from '../pages-actions/delete';
+import { Page } from '../../../types';
+import View from '../pages-actions/view';
+import SetHome from '../pages-actions/set-home';
+
+type Props = MenuProps & {
+	page: Page
+};
+
+export default function PageActionsMenu( { page, ...props }: Props ) {
+	return (
+		<Menu
+			PaperProps={ { sx: { mt: 4, width: 200 } } }
+			MenuListProps={ { dense: true } }
+			{ ...props }
+		>
+			<Rename />
+			<Duplicate />
+			<Delete page={ page } />
+			<View />
+			<Divider />
+			<SetHome page={ page } />
+		</Menu>
+	);
+}

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { TrashIcon } from '@elementor/icons';
+import { Page } from '../../../types';
+import { useActiveDocument } from '@elementor/editor-documents';
+import { __ } from '@wordpress/i18n';
+import ActionMenuItem from '../actions-menu/action-menu-item';
+
+export default function Delete( { page }: { page: Page } ) {
+	const activeDocument = useActiveDocument();
+
+	const isActive = activeDocument?.id === page.id;
+
+	return (
+		<ActionMenuItem
+			title={ __( 'Delete', 'elementor' ) }
+			icon={ TrashIcon }
+			disabled={ page.isHome || isActive }
+			onClick={ () => null }
+		/>
+	);
+}

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { CopyIcon } from '@elementor/icons';
+import ActionMenuItem from '../actions-menu/action-menu-item';
+
+export default function Duplicate() {
+	return (
+		<ActionMenuItem
+			title={ __( 'Duplicate', 'elementor' ) }
+			icon={ CopyIcon }
+			onClick={ () => null }
+		/>
+	);
+}

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { EraseIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+import ActionMenuItem from '../actions-menu/action-menu-item';
+
+export default function Rename() {
+	return (
+		<ActionMenuItem
+			title={ __( 'Rename', 'elementor' ) }
+			icon={ EraseIcon }
+			onClick={ () => null }
+		/>
+	);
+}

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Page } from '../../../types';
+import { HomeIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+import ActionMenuItem from '../actions-menu/action-menu-item';
+
+export default function SetHome( { page }: { page: Page } ) {
+	return (
+		<ActionMenuItem
+			title={ __( 'Set as homepage', 'elementor' ) }
+			icon={ HomeIcon }
+			disabled={ !! page.isHome }
+			onClick={ () => null }
+		/>
+	);
+}

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { EyeIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+import ActionMenuItem from '../actions-menu/action-menu-item';
+
+export default function View() {
+	return (
+		<ActionMenuItem
+			title={ __( 'View Page', 'elementor' ) } // TODO 21/06/2023 : post label should come from post type
+			icon={ EyeIcon }
+			onClick={ () => null }
+		/>
+	);
+}

package/src/components/panel/pages-list/__tests__/page-list-item.test.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { act, render } from '@testing-library/react';
+import { Page } from '../../../../types';
+import PageListItem from '../page-list-item';
+import { useNavigateToDocument } from '@elementor/editor-documents';
+
+jest.mock( '@elementor/editor-documents', () => ( {
+	useActiveDocument: jest.fn(),
+	useNavigateToDocument: jest.fn(),
+} ) );
+
+describe( '@elementor/editor-site-navigation - PageListItem', () => {
+	afterAll( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should render a published post', () => {
+		// Arrange.
+		const page: Page = {
+			id: 1,
+			title: 'Test Post',
+			status: 'publish',
+			type: 'page',
+		};
+
+		// Act.
+		const { getByText, queryByText } = render( <PageListItem page={ page } /> );
+
+		// Assert.
+		const label = getByText( 'Test Post' );
+		const publishedLabel = queryByText( 'publish', { exact: false } );
+
+		expect( label ).toBeInTheDocument();
+		expect( publishedLabel ).toBeNull();
+	} );
+
+	it( 'should show the post status for non-published posts', () => {
+		// Arrange.
+		const page: Page = {
+			id: 1,
+			title: 'Test Post',
+			status: 'draft',
+			type: 'page',
+		};
+
+		// Act.
+		const { getByText } = render( <PageListItem page={ page } /> );
+
+		// Assert.
+		const label = getByText( 'draft', { exact: false } );
+		expect( label ).toBeInTheDocument();
+	} );
+
+	it( 'should render actions menu', () => {
+		// Arrange.
+		const page: Page = {
+			id: 1,
+			title: 'Test Post',
+			status: 'draft',
+			type: 'page',
+		};
+
+		const actions = [ 'View Page', 'Rename', 'Duplicate', 'Delete', 'Set as homepage' ];
+
+		// Act.
+		const { getByText, getAllByRole } = render( <PageListItem page={ page } /> );
+		const buttons = getAllByRole( 'button' );
+		// Button to open menu
+		const button = buttons[ 1 ];
+
+		act( () => {
+			// Open menu
+			button.click();
+		} );
+
+		// Assert.
+		actions.forEach( ( action ) => {
+			const label = getByText( action );
+			expect( label ).toBeInTheDocument();
+		} );
+	} );
+
+	it( 'should navigate to document on click', () => {
+		// Arrange.
+		const navigateToDocument = jest.fn();
+		jest.mocked( useNavigateToDocument ).mockReturnValue( navigateToDocument );
+
+		const id = 10;
+
+		const page: Page = {
+			id,
+			title: 'Test Post',
+			status: 'draft',
+			type: 'page',
+		};
+
+		// Act.
+		const { getAllByRole } = render( <PageListItem page={ page } /> );
+		const buttons = getAllByRole( 'button' );
+		const button = buttons[ 0 ];
+
+		act( () => {
+			button.click();
+		} );
+
+		// Assert.
+		expect( navigateToDocument ).toHaveBeenCalledTimes( 1 );
+		expect( navigateToDocument ).toHaveBeenCalledWith( id );
+	} );
+} );