@elementor/editor-site-navigation 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+
+export { }

package/dist/index.js

@@ -0,0 +1,174 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/components/top-bar/recently-edited.tsx
+var React4 = __toESM(require("react"));
+var import_ui4 = require("@elementor/ui");
+var import_icons2 = require("@elementor/icons");
+var import_editor_documents = require("@elementor/editor-documents");
+
+// src/components/top-bar/indicator.tsx
+var React = __toESM(require("react"));
+var import_ui = require("@elementor/ui");
+function Indicator({ title, status }) {
+  return /* @__PURE__ */ React.createElement(import_ui.Tooltip, { title }, /* @__PURE__ */ React.createElement(import_ui.Stack, { direction: "row", alignItems: "center", spacing: 2 }, /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2", sx: { maxWidth: "120px" }, noWrap: true }, title), status.value !== "publish" && /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2", sx: { fontStyle: "italic" } }, "(", status.label, ")")));
+}
+
+// src/components/top-bar/posts-list.tsx
+var React3 = __toESM(require("react"));
+var import_ui3 = require("@elementor/ui");
+var import_i18n = require("@wordpress/i18n");
+
+// src/components/top-bar/chip-doc-type.tsx
+var import_icons = require("@elementor/icons");
+var import_ui2 = require("@elementor/ui");
+var React2 = __toESM(require("react"));
+var iconsDocType = {
+  header: import_icons.HeaderTemplateIcon,
+  footer: import_icons.FooterTemplateIcon,
+  "single-post": import_icons.PostTypeIcon,
+  "single-page": import_icons.PageTypeIcon,
+  popup: import_icons.PopupTemplateIcon,
+  archive: import_icons.ArchiveTemplateIcon,
+  "search-results": import_icons.SearchResultsTemplateIcon,
+  "loop-item": import_icons.LoopItemTemplateIcon,
+  "error-404": import_icons.Error404TemplateIcon,
+  "landing-page": import_icons.LandingPageTemplateIcon,
+  page: import_icons.PageTemplateIcon,
+  section: import_icons.SectionTemplateIcon,
+  container: import_icons.ContainerTemplateIcon,
+  "wp-page": import_icons.PageTypeIcon,
+  "wp-post": import_icons.PostTypeIcon
+};
+function DocTypeChip({ postType, docType, label }) {
+  const color = "elementor_library" === postType ? "global" : "primary";
+  const Icon = iconsDocType?.[docType] || import_icons.PostTypeIcon;
+  return /* @__PURE__ */ React2.createElement(
+    import_ui2.Chip,
+    {
+      size: "medium",
+      variant: "standard",
+      label,
+      color,
+      icon: /* @__PURE__ */ React2.createElement(Icon, null)
+    }
+  );
+}
+
+// src/components/top-bar/posts-list.tsx
+function PostsList({ recentPosts }) {
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(import_ui3.ListSubheader, { sx: { fontSize: 12, fontStyle: "italic", pl: 4 }, component: "div", id: "nested-list-subheader" }, (0, import_i18n.__)("Recent", "elementor")), recentPosts.length ? recentPosts.map(({ title, edit_url: editUrl, type, id }) => /* @__PURE__ */ React3.createElement(
+    import_ui3.MenuItem,
+    {
+      key: id,
+      component: "a",
+      href: editUrl
+    },
+    title,
+    /* @__PURE__ */ React3.createElement(DocTypeChip, { postType: type.post_type, docType: type.doc_type, label: type.label })
+  )) : /* @__PURE__ */ React3.createElement(import_ui3.Typography, { variant: "caption", sx: { color: "grey.500", fontStyle: "italic", p: 4 }, component: "div", "aria-label": void 0 }, (0, import_i18n.__)("There are no other pages or templates on this site yet.", "elementor")));
+}
+
+// src/hooks/use-recent-posts.ts
+var import_react = require("react");
+var import_api_fetch = __toESM(require("@wordpress/api-fetch"));
+var import_url = require("@wordpress/url");
+function useRecentPosts(documentId) {
+  const [recentPosts, setRecentPosts] = (0, import_react.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react.useState)(false);
+  (0, import_react.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 (0, import_api_fetch.default)({
+    path: (0, import_url.addQueryArgs)("/elementor/v1/site-navigation/recent-posts", queryParams)
+  }).then((response) => response).catch(() => []);
+}
+
+// src/components/top-bar/recently-edited.tsx
+function RecentlyEdited() {
+  const activeDocument = (0, import_editor_documents.useActiveDocument)();
+  const hostDocument = (0, import_editor_documents.useHostDocument)();
+  const document = activeDocument && activeDocument.type.value !== "kit" ? activeDocument : hostDocument;
+  const { recentPosts } = useRecentPosts(document?.id);
+  const popupState = (0, import_ui4.usePopupState)({
+    variant: "popover",
+    popupId: "elementor-v2-top-bar-recently-edited"
+  });
+  if (!document) {
+    return null;
+  }
+  return /* @__PURE__ */ React4.createElement(import_ui4.Box, { sx: { cursor: "default" } }, /* @__PURE__ */ React4.createElement(
+    import_ui4.Button,
+    {
+      color: "inherit",
+      endIcon: /* @__PURE__ */ React4.createElement(import_icons2.ChevronDownIcon, null),
+      ...(0, import_ui4.bindTrigger)(popupState)
+    },
+    /* @__PURE__ */ React4.createElement(
+      Indicator,
+      {
+        title: document.title,
+        status: document.status
+      }
+    )
+  ), /* @__PURE__ */ React4.createElement(
+    import_ui4.Menu,
+    {
+      PaperProps: { sx: { minWidth: 314 } },
+      ...(0, import_ui4.bindMenu)(popupState)
+    },
+    /* @__PURE__ */ React4.createElement(PostsList, { recentPosts })
+  ));
+}
+
+// src/init.ts
+var import_editor_app_bar = require("@elementor/editor-app-bar");
+function init() {
+  registerTopBarMenuItems();
+}
+function registerTopBarMenuItems() {
+  (0, import_editor_app_bar.injectIntoPageIndication)({
+    name: "document-recently-edited",
+    filler: RecentlyEdited
+  });
+}
+
+// src/index.ts
+init();

package/dist/index.mjs

@@ -0,0 +1,175 @@
+// src/components/top-bar/recently-edited.tsx
+import * as React4 from "react";
+import {
+  bindMenu,
+  usePopupState,
+  bindTrigger,
+  Menu,
+  Button,
+  Box
+} from "@elementor/ui";
+import { ChevronDownIcon } from "@elementor/icons";
+import { useActiveDocument, useHostDocument } from "@elementor/editor-documents";
+
+// src/components/top-bar/indicator.tsx
+import * as React from "react";
+import { Tooltip, Typography, Stack } from "@elementor/ui";
+function Indicator({ title, status }) {
+  return /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(Stack, { direction: "row", alignItems: "center", spacing: 2 }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2", sx: { maxWidth: "120px" }, noWrap: true }, title), status.value !== "publish" && /* @__PURE__ */ React.createElement(Typography, { variant: "body2", sx: { fontStyle: "italic" } }, "(", status.label, ")")));
+}
+
+// src/components/top-bar/posts-list.tsx
+import * as React3 from "react";
+import {
+  MenuItem,
+  ListSubheader,
+  Typography as Typography2
+} from "@elementor/ui";
+import { __ } from "@wordpress/i18n";
+
+// src/components/top-bar/chip-doc-type.tsx
+import {
+  ArchiveTemplateIcon,
+  HeaderTemplateIcon,
+  FooterTemplateIcon,
+  PostTypeIcon,
+  PageTypeIcon,
+  PopupTemplateIcon,
+  SearchResultsTemplateIcon,
+  Error404TemplateIcon,
+  LoopItemTemplateIcon,
+  LandingPageTemplateIcon,
+  PageTemplateIcon,
+  SectionTemplateIcon,
+  ContainerTemplateIcon
+} from "@elementor/icons";
+import { Chip } from "@elementor/ui";
+import * as React2 from "react";
+var iconsDocType = {
+  header: HeaderTemplateIcon,
+  footer: FooterTemplateIcon,
+  "single-post": PostTypeIcon,
+  "single-page": PageTypeIcon,
+  popup: PopupTemplateIcon,
+  archive: ArchiveTemplateIcon,
+  "search-results": SearchResultsTemplateIcon,
+  "loop-item": LoopItemTemplateIcon,
+  "error-404": Error404TemplateIcon,
+  "landing-page": LandingPageTemplateIcon,
+  page: PageTemplateIcon,
+  section: SectionTemplateIcon,
+  container: ContainerTemplateIcon,
+  "wp-page": PageTypeIcon,
+  "wp-post": PostTypeIcon
+};
+function DocTypeChip({ postType, docType, label }) {
+  const color = "elementor_library" === postType ? "global" : "primary";
+  const Icon = iconsDocType?.[docType] || PostTypeIcon;
+  return /* @__PURE__ */ React2.createElement(
+    Chip,
+    {
+      size: "medium",
+      variant: "standard",
+      label,
+      color,
+      icon: /* @__PURE__ */ React2.createElement(Icon, null)
+    }
+  );
+}
+
+// src/components/top-bar/posts-list.tsx
+function PostsList({ recentPosts }) {
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(ListSubheader, { sx: { fontSize: 12, fontStyle: "italic", pl: 4 }, component: "div", id: "nested-list-subheader" }, __("Recent", "elementor")), recentPosts.length ? recentPosts.map(({ title, edit_url: editUrl, type, id }) => /* @__PURE__ */ React3.createElement(
+    MenuItem,
+    {
+      key: id,
+      component: "a",
+      href: editUrl
+    },
+    title,
+    /* @__PURE__ */ React3.createElement(DocTypeChip, { postType: type.post_type, docType: type.doc_type, label: type.label })
+  )) : /* @__PURE__ */ React3.createElement(Typography2, { variant: "caption", sx: { color: "grey.500", fontStyle: "italic", p: 4 }, component: "div", "aria-label": void 0 }, __("There are no other pages or templates on this site yet.", "elementor")));
+}
+
+// src/hooks/use-recent-posts.ts
+import { useEffect, useState } from "react";
+import apiFetch from "@wordpress/api-fetch";
+import { addQueryArgs } from "@wordpress/url";
+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("/elementor/v1/site-navigation/recent-posts", queryParams)
+  }).then((response) => response).catch(() => []);
+}
+
+// src/components/top-bar/recently-edited.tsx
+function RecentlyEdited() {
+  const activeDocument = useActiveDocument();
+  const hostDocument = useHostDocument();
+  const document = activeDocument && activeDocument.type.value !== "kit" ? activeDocument : hostDocument;
+  const { recentPosts } = useRecentPosts(document?.id);
+  const popupState = usePopupState({
+    variant: "popover",
+    popupId: "elementor-v2-top-bar-recently-edited"
+  });
+  if (!document) {
+    return null;
+  }
+  return /* @__PURE__ */ React4.createElement(Box, { sx: { cursor: "default" } }, /* @__PURE__ */ React4.createElement(
+    Button,
+    {
+      color: "inherit",
+      endIcon: /* @__PURE__ */ React4.createElement(ChevronDownIcon, null),
+      ...bindTrigger(popupState)
+    },
+    /* @__PURE__ */ React4.createElement(
+      Indicator,
+      {
+        title: document.title,
+        status: document.status
+      }
+    )
+  ), /* @__PURE__ */ React4.createElement(
+    Menu,
+    {
+      PaperProps: { sx: { minWidth: 314 } },
+      ...bindMenu(popupState)
+    },
+    /* @__PURE__ */ React4.createElement(PostsList, { recentPosts })
+  ));
+}
+
+// src/init.ts
+import { injectIntoPageIndication } from "@elementor/editor-app-bar";
+function init() {
+  registerTopBarMenuItems();
+}
+function registerTopBarMenuItems() {
+  injectIntoPageIndication({
+    name: "document-recently-edited",
+    filler: RecentlyEdited
+  });
+}
+
+// src/index.ts
+init();

package/package.json

@@ -0,0 +1,50 @@
+{
+	"name": "@elementor/editor-site-navigation",
+	"version": "0.1.0",
+	"private": false,
+	"author": "Elementor Team",
+	"homepage": "https://elementor.com/",
+	"license": "GPL-3.0-or-later",
+	"main": "dist/index.js",
+	"module": "dist/index.mjs",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": {
+			"import": "./dist/index.mjs",
+			"require": "./dist/index.js",
+			"types": "./dist/index.d.ts"
+		},
+		"./package.json": "./package.json"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/elementor/elementor-packages.git",
+		"directory": "packages/editor-site-navigation"
+	},
+	"bugs": {
+		"url": "https://github.com/elementor/elementor-packages/issues"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"build": "tsup src/index.ts --format esm,cjs --dts --clean",
+		"dev": "tsup src/index.ts --format esm --clean"
+	},
+	"dependencies": {
+		"@elementor/editor-app-bar": "^0.1.0",
+		"@elementor/editor-documents": "^0.1.0",
+		"@elementor/icons": "^0.1.0",
+		"@elementor/ui": "^1.4.47",
+		"@wordpress/api-fetch": "^6.27.0",
+		"@wordpress/i18n": "^4.31.0",
+		"@wordpress/url": "^3.31.0"
+	},
+	"peerDependencies": {
+		"react": "17.x"
+	},
+	"elementor": {
+		"type": "extension"
+	},
+	"gitHead": "2ba9f13a9dbd085eb6ed8e6e303e9275ce626b8d"
+}

package/src/components/top-bar/__tests__/recently-edited.test.tsx

@@ -0,0 +1,180 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { useHostDocument, useActiveDocument } from '@elementor/editor-documents';
+import RecentlyEdited from '../recently-edited';
+import { createMockDocument } from 'test-utils';
+import useRecentPosts, { Post } from '../../../hooks/use-recent-posts';
+
+jest.mock( '@elementor/editor-documents', () => ( {
+	useActiveDocument: jest.fn(),
+	useHostDocument: jest.fn(),
+} ) );
+
+jest.mock( '../../../hooks/use-recent-posts', () => (
+	{
+		default: jest.fn( () => ( { isLoading: false, recentPosts: [] } ) ),
+		__esModule: true,
+	}
+) );
+
+describe( '@elementor/editor-site-navigation - Top bar Recently Edited', () => {
+	beforeEach( () => {
+		jest.mocked( useActiveDocument ).mockImplementation( () =>
+			createMockDocument( { id: 1, title: 'Active Document' } )
+		);
+
+		jest.mocked( useHostDocument ).mockImplementation( () =>
+			createMockDocument( { id: 2, title: 'Host Document' } )
+		);
+	} );
+
+	it( 'should show the title of the active document without its status when the document is published', async () => {
+		// Act.
+		const { queryByText } = render( <RecentlyEdited /> );
+
+		// Assert.
+		expect( queryByText( 'Active Document' ) ).toBeTruthy();
+		expect( queryByText( '(publish)' ) ).not.toBeTruthy();
+	} );
+
+	it( 'should show the title of the active document with its status when the document is not published', async () => {
+		// Arrange.
+		jest.mocked( useActiveDocument ).mockImplementation( () =>
+			createMockDocument( {
+				id: 1,
+				title: 'Active Document',
+				status: {
+					value: 'draft',
+					label: 'Draft',
+				},
+			} )
+		);
+
+		// Act.
+		const { queryByText } = render( <RecentlyEdited /> );
+
+		// Assert.
+		expect( queryByText( 'Active Document' ) ).toBeTruthy();
+		expect( queryByText( '(Draft)' ) ).toBeTruthy();
+	} );
+
+	it( 'should show the title of the host document when there is no active document', () => {
+		// Arrange.
+		jest.mocked( useActiveDocument ).mockImplementation( () => null );
+
+		// Act.
+		const { queryByText } = render( <RecentlyEdited /> );
+
+		// Assert.
+		expect( queryByText( 'Host Document' ) ).toBeTruthy();
+	} );
+
+	it( 'should show the title of the host document when the active document is kit', () => {
+		// Arrange.
+
+		jest.mocked( useActiveDocument ).mockImplementation( () =>
+			createMockDocument( {
+				id: 1,
+				title: 'Active Document',
+				type: {
+					value: 'kit',
+					label: 'Kit',
+				},
+			} )
+		);
+
+		// Act.
+		const { queryByText } = render( <RecentlyEdited /> );
+
+		// Assert.
+		expect( queryByText( 'Host Document' ) ).toBeTruthy();
+	} );
+
+	it( 'should show nothing if there are no documents', () => {
+		// Arrange.
+		jest.mocked( useActiveDocument ).mockImplementation( () => null );
+		jest.mocked( useHostDocument ).mockImplementation( () => null );
+
+		// Act.
+		const { queryByText } = render( <RecentlyEdited /> );
+
+		// Assert.
+		expect( queryByText( 'Host Document' ) ).not.toBeTruthy();
+		expect( queryByText( 'Active Document' ) ).not.toBeTruthy();
+	} );
+
+	it( 'should show empty state', () => {
+		// Arrange.
+		jest.mocked( useActiveDocument ).mockImplementation( () =>
+			createMockDocument( {
+				id: 1,
+				title: 'Header',
+				type: {
+					value: 'header',
+					label: 'Header',
+				},
+			} )
+		);
+
+		const isLoading = false;
+		const recentPosts: Post[] = [];
+
+		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, recentPosts } );
+
+		const { getByText, getAllByRole } = render( <RecentlyEdited /> );
+
+		// Act.
+		const buttons = getAllByRole( 'button' );
+		buttons[ 0 ].click(); // Opens the recently edited menu
+
+		// Assert.
+		const label = getByText( 'There are no other pages or templates on this site yet', { exact: false } );
+		expect( label ).toBeInTheDocument();
+	} );
+
+	it( 'should open the recently edited menu on click', () => {
+		// Arrange.
+		jest.mocked( useActiveDocument ).mockImplementation( () =>
+			createMockDocument( {
+				id: 1,
+				title: 'Header',
+				type: {
+					value: 'header',
+					label: 'Header',
+				},
+			} )
+		);
+
+		const isLoading = false;
+		const recentPosts: Post[] = [ {
+			id: 1,
+			title: 'Test post',
+			edit_url: 'some_url',
+			type: {
+				post_type: 'post',
+				doc_type: 'wp-post',
+				label: 'Post',
+			},
+			date_modified: 123,
+		} ];
+
+		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, recentPosts } );
+
+		const { getByText, getByRole, getAllByRole } = render( <RecentlyEdited /> );
+
+		// Act.
+		const buttons = getAllByRole( 'button' );
+		buttons[ 0 ].click(); // Opens the recently edited menu
+
+		// Assert.
+		const menu = getByRole( 'menu' );
+		expect( menu ).toBeInTheDocument();
+
+		const label = getByText( 'Recent' );
+		expect( label ).toBeInTheDocument();
+
+		const menuItems = getAllByRole( 'menuitem' );
+		expect( menuItems ).toHaveLength( 1 );
+		expect( getByText( 'Test post' ) ).toBeInTheDocument();
+	} );
+} );

package/src/components/top-bar/chip-doc-type.tsx

@@ -0,0 +1,60 @@
+import {
+	ArchiveTemplateIcon,
+	HeaderTemplateIcon,
+	FooterTemplateIcon,
+	PostTypeIcon,
+	PageTypeIcon,
+	PopupTemplateIcon,
+	SearchResultsTemplateIcon,
+	Error404TemplateIcon,
+	LoopItemTemplateIcon,
+	LandingPageTemplateIcon,
+	PageTemplateIcon,
+	SectionTemplateIcon,
+	ContainerTemplateIcon,
+} from '@elementor/icons';
+import { Chip } from '@elementor/ui';
+import { DocType } from '../../types';
+import * as React from 'react';
+
+type DocTypes = {
+	[key in DocType]: React.ElementType;
+};
+
+const iconsDocType: DocTypes = {
+	header: HeaderTemplateIcon,
+	footer: FooterTemplateIcon,
+	'single-post': PostTypeIcon,
+	'single-page': PageTypeIcon,
+	popup: PopupTemplateIcon,
+	archive: ArchiveTemplateIcon,
+	'search-results': SearchResultsTemplateIcon,
+	'loop-item': LoopItemTemplateIcon,
+	'error-404': Error404TemplateIcon,
+	'landing-page': LandingPageTemplateIcon,
+	page: PageTemplateIcon,
+	section: SectionTemplateIcon,
+	container: ContainerTemplateIcon,
+	'wp-page': PageTypeIcon,
+	'wp-post': PostTypeIcon,
+};
+
+export type Props = {
+	postType: string;
+	docType: DocType;
+	label: string;
+};
+export default function DocTypeChip( { postType, docType, label }: Props ) {
+	const color = 'elementor_library' === postType ? 'global' : 'primary';
+	const Icon = iconsDocType?.[ docType ] || PostTypeIcon;
+
+	return (
+		<Chip
+			size="medium"
+			variant="standard"
+			label={ label }
+			color={ color }
+			icon={ <Icon /> }
+		/>
+	);
+}

package/src/components/top-bar/indicator.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Tooltip, Typography, Stack } from '@elementor/ui';
+import { Document } from '@elementor/editor-documents';
+
+type Props = {
+	title: Document['title'],
+	status: Document['status']
+}
+
+export default function Indicator( { title, status }: Props ) {
+	return (
+		<Tooltip title={ title }>
+			<Stack direction="row" alignItems="center" spacing={ 2 }>
+				<Typography variant="body2" sx={ { maxWidth: '120px' } } noWrap>
+					{ title }
+				</Typography>
+				{ status.value !== 'publish' &&
+					<Typography variant="body2" sx={ { fontStyle: 'italic' } }>
+						({ status.label })
+					</Typography>
+				}
+			</Stack>
+		</Tooltip>
+	);
+}